0

私は約3つの画像を持つxhtmlを構築しています.各画像に文字 A と B の2つのラジオボタンを持たせたいと思います. pic image1 を A と B にするか、pic image2 を A とし、image3 を B とするか、image1 を B とし、image3 を A とするか、またはそのようなものを任意に並べ替えます。

どうすればこれを達成できますか? オンラインのチュートリアルなどは見つかりませんでした。それらをグループ化する簡単な方法はありますか？そのため、画像全体で 1 つの「A」を選択でき、1 つの「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

ボタンのグループのように同じ名前属性を持っている必要があります OK 私はこの小さなコードを実行しました

> <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 に答える