在單選按鈕選擇使用圖像primefaces selectOneRadio

Question

我試圖用primefaces selectOneRadio構建UI。 目前我需要能夠顯示5個圖像，實際上是單選按鈕，圖像在選擇時會顯示藍色邊框。實際的單選按鈕是隱藏的。

我試圖primefaces selectOneRadio自定義佈局，但點擊圖像不選擇單選按鈕，該按鈕也是可見的。

這是我的代碼。我使用css的基礎。

<ul class="small-block-grid-5"> 
      <p:selectOneRadio value="scooter" id="vehicleType" layout="custom"> 
       <f:selectItem itemValue="scooter" /> 
       <f:selectItem itemValue="bike"/> 
       <f:selectItem itemValue="car"/> 
       <f:selectItem itemValue="plane" /> 
       <f:selectItem itemValue="unknown" /> 
       <f:ajax event="click" render="addCost"/> 
      </p:selectOneRadio> 

      <li> 
       <p:radioButton id="scooter" for="vehicleType" itemIndex="0"></p:radioButton> 
       <h:graphicImage for="scooter" value="/images/scooter.GIF" width="50" height="50"/> 
      </li> 
      <li> 
       <p:radioButton id="bike" for="vehicleType" itemIndex="1"></p:radioButton> 
       <h:graphicImage for="bike" value="/images/bike.GIF" width="50" height="50"/> 
      </li> 
      <li> 
       <p:radioButton id="car" for="vehicleType" itemIndex="2"></p:radioButton> 
       <h:graphicImage for="car" value="/images/car.GIF" width="50" height="50"/> 
       <h:panelGroup id="addCost"> 
       <h:outputText styleClass="breadcrumbs" value="Add 10$" /> 
       </h:panelGroup> 
      </li> 
      <li> 
       <p:radioButton id="plane" for="vehicleType" itemIndex="3"></p:radioButton> 
       <h:graphicImage for="plane" value="/images/plane.GIF" width="50" height="50"/> 
      </li> 
      <li> 
       <p:radioButton id="unknown" for="vehicleType" itemIndex="4"></p:radioButton> 
       <h:graphicImage for="unknown" value="/images/unkown.GIF" width="50" height="50"/> 
      </li> 
     </ul> 

Answer 1

我解決了這個使用一些CSS和基礎。

   <ul class="small-block-grid-5"> 
       <p:selectOneRadio value="scooter" id="vehicleType" layout="custom"> 
        <f:selectItem itemValue="scooter" /> 
        <f:selectItem itemValue="bike"/> 
        <f:selectItem itemValue="car"/> 
        <f:selectItem itemValue="plane" /> 
        <f:selectItem itemValue="unknown" /> 
        <f:ajax event="click" render="addCost"/> 
       </p:selectOneRadio> 

       <li> 
       <div class="row"> 
        <div class="small-1 columns invisibleDiv "> 
        <p:radioButton id="scooter" for="vehicleType" itemIndex="0"></p:radioButton> 
        </div> 
        <div class="small-11 columns imgSec"> 
        <h:graphicImage for="scooter" value="/images/scooter.GIF" width="50" height="50"/> 
        </div> 
       </div> 
       </li> 
      </ul> 

CSS的

.invisibleDiv { 
    visibility: hidden; 
} 
.borderDiv { 
    border: 1px solid blue; 
} 

JS的

$(".imgSec").click(function(){ 
     var radioInput= $(this).prev(".invisibleDiv "); 
     $(".imgSec").removeClass("borderDiv"); 
     $(this).addClass("borderDiv"); 
    });