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"); 
    });