使用图像在质数表中选择单选按钮selectOneRadio [英] Use image for radio button selection in primefaces selectOneRadio

问题描述

我正在尝试使用primefaces selectOneRadio构建UI. 目前，我需要能够显示5张实际上是单选按钮的图像，并且选中该图像时会出现蓝色边框.实际的单选按钮已隐藏.

I am trying to build UI using primefaces selectOneRadio. Currently I need to be able to display 5 images which are actually radio buttons and the image gets a blue border when selected. The actual radio button is hidden.

我尝试了使用自定义布局的primefaces selectOneRadio，但是单击图像不会选择单选按钮，并且该按钮也是可见的.

I tried primefaces selectOneRadio with custom layout but clicking on image does not select the radio button and the button is also visible.

这是我的代码.我使用CSS基础.

Here is my code. I use foundation for 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>

推荐答案

我使用一些CSS和基础解决了这个问题.

I solved this using some css and foundation.

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

这篇关于使用图像在质数表中选择单选按钮selectOneRadio的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！