xhtml의 단일 항목에 대해 여러 라디오 버튼을 사용하는 방법

Question

약 3 개의 이미지가있는 xhtml을 만들고 있는데 각 이미지에는 A와 B라는 문자가있는 2 개의 라디오 버튼이 있어야합니다. "가장 아름답다"와 B는 "가장 역동적"이므로 사용자는 그림 1을 A & B로, 그림 2를 A로, 그림 3을 B로, 그림 1을 B로, 그림 3을 A로, 또는 임의의 순열로 사용할 수 있습니다.

어떻게하면됩니까? 온라인이나 기타 튜토리얼을 찾지 못했습니다. 그룹화 할 수있는 간단한 방법이 있습니까? 그래서 하나의 'A'는 이미지에서 선택 될 수 있고 오직 하나의 "B"만이 선택 될 수 있습니다. 왜냐하면 나는 이미지를 가로 질러 라디오 버튼을 에뮬레이트하기 위해 자바 스크립트를 사용하지 않기 때문이다.

<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 엘 = document.getElementsByClassName ("를 ClassA")를 수행 한 버튼 확인 의 그룹과 같은 이름이 같은 특성이 있어야합니다; if (el [0] .checked) { el [1] .checked = false; // 여기에 u는

는 u는 내가 그에게 가까이 있기를 바랍니다 내가 특별 항목 번호 대신 당해 요소를 얻기 위해 여기에 이벤트 처리기를 추가해야합니다} 요소의 나머지 부분을 취소 할 몇 가지 루프를 추가 할 수있는 너는하고 싶다