Question

我正在构建一个xhtml，我将有大约3张图片，我希望每张图片都有2个带字母A和B的单选按钮，这意味着“最美丽”和B“最具活力”，所以用户可以将图像1作为A＆amp; B或pic图像2作为A，图像3作为B，或图像1作为B，图像3作为A或任何其他的置换。

我该怎么做到这一点？我没有在网上找到任何教程或任何东西。是否有一种简单的方法可以将它们分组？因此，可以在图像中选择“A”，并且只能选择一个“B”。因为我宁愿不使用javascript来模拟图像中的单选按钮。

<table width="100%" border="1">
                <h:selectOneRadio id="oppelonas"
                    value="#{historialAndrogeneticoBB.images}">
                    <tr>
                        <td>
                            <table  border="1">
                            <tr>
                                <td>
                                    <f:selectItem itemLabel="A" itemValue="2A" />
                                    <f:selectItem itemLabel="B" itemValue="2B" />
                                 </td>
                                <td>
                                    <img src="/image1.png" alt="2" />
                                </td>
                            </tr>
                            </table>
                        </td>
                        <td>
                            <table  border="1">>
                            <tr>
                                <td>
                                    <f:selectItem itemLabel="A" itemValue="3VA" /> 
                                    <f:selectItem itemLabel="B" itemValue="3VB" />
                                </td>
                                <td>
                                    <img src="/image2" alt="3V" />
                                </td>
                            </tr>
                            </table>
                        </td>
                        <td>
                            <table  border="1">>
                                <tr>
                                    <td>
                                        <f:selectItem itemLabel="A" itemValue="5AA" /> 
                                        <f:selectItem itemLabel="B" itemValue="5AB" />
                                    </td>
                                    <td>
                                        <img src="/image3" alt="5A" />
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>

                </h:selectOneRadio>
            </table>

Answer 1

它们必须具有相同的名称属性，如一组按钮好的，我已经完成了这个小代码

> <div>     <input type="radio" value="A" class="ClassA" />     
> <input type="radio" value="b" class="ClassB" /> </div> <div>  
> <input type="radio" value="A" class="ClassA" />   
> <input type="radio"  value="b" class="ClassB" /> <div>
>

VAR EL = document.getElementsByClassName（ “ClassA的”）; if（el [0] .checked）{ EL [1] .checked = FALSE; //这里你可以添加一些循环来取消选中其余的元素 }

你必须为它添加事件处理程序以获得有关的元素我代替特殊项目编号我希望它接近你想做的事情

如何在xhtml中为单个项目设置多个单选按钮

1 个答案: