在单选按钮选择使用图像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"); 
    });