다른 하나를 선택할 때 라디오 버튼을 비활성화하십시오.

Question

아래의 예에서. 두 개의 기본 라디오 버튼 (opt1 및 opt2)이 있습니다. opt1에는 3 개의 하위 라디오 버튼이 있습니다. opt1을 선택하면 아무 일도 일어나지 않지만 opt2가 선택되면 "main_sub"라는 라디오 버튼이 선택 해제되어야합니다. 이것을 달성하는 방법.

코드 :

<div class="field"> 
        <label>Radio button 
       </label> 
        <table width="60%" border="0" cellspacing="0" height="100%" cellpadding="0"> 
        <tr> 
         <td><input type="radio" name="main" id="main" value="Yes" /> 
        Opt1 </td> 
        </tr> 
        <tr> 
         <td id="show" style="padding-left:25px; width:200px; padding-top:5px; line-height:20px;"><input type="radio" name="main_sub" id="main_sub" value="" /> 
         sub Opt1<br> 
         <input type="radio" name="main_sub" id="main_sub" value="" /> 
         sub Opt2<br> 
         <input type="radio" name="main_sub" id="main_sub" value="" /> 
         sub Opt2<br> 
         </td> 
        </tr> 
        </table> 

        <table align="center" width="100%" border="0" cellspacing="0" height="100%" cellpadding="0"> 
        <tr> 
         <td align="center" style="padding-right:60px;" ><input type="radio" name="main" id="main" value="No" /> 
         Opt2</td> 
        </tr> 
        </table> 
       </div> 

Answer 1

첫째, IDS는 그래서 당신은 당신이 원하는 것을 달성하기 위해이 작업을 수행 할 수 있습니다 그 후

를 메인 2하기 위해 2 주 라디오 ID를 변경 고유해야합니다

document.getElementById("main2").addEventListener("change", function(){ 
    if (this.checked) { 
     var subs_list = document.getElementsByName("main_sub"); 
     var subs = Array.prototype.slice.call(subs_list); 
     console.log(subs); 
     subs.forEach(function(sub){ 
      sub.checked = false; 
     }); 
    } 
}); 

FIDDLE

---

수정

그리고 나는 그와는 정반대의 방식을 원할 것입니다. 하위 라디오를 클릭하면 main1이 이미 선택되어 있고 main2가 선택 해제되어 있어야합니다. 이를 위해이 코드도 추가해야합니다.

var subs_list_2 = document.getElementsByName("main_sub"); 
var subs_2 = Array.prototype.slice.call(subs_list_2); 
subs_2.forEach(function(sub){ 
    sub.addEventListener("change", function(){ 
     if (this.checked) { 
      document.getElementById("main2").checked = false; 
      document.getElementById("main").checked = true; 
     } 
    }); 
}); 

UPDATED FIDDLE