0

我正在构建一个 xhtml，其中将有大约 3 个图像，并且我希望每个图像有 2 个带有字母 A 和 B 的单选按钮，这意味着 A“最漂亮”和 B“最动态”，所以用户可以pic image1 为 A 和 B，或 pic image2 为 A，image3 为 B，或 image1 为 B，image3 为 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>
4

1 回答 1

0

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

> <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; // 在这里你可以添加一些循环来取消选中其余元素 }

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

于 2012-09-21T17:27:30.300 回答