Question

来自以下示例。有2个主要的单选按钮（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

首先，ID必须是唯一的，因此请将您的第二个主广播ID更改为main2

之后你可以做到这一点来实现你想要的目标

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

选择另一个时禁用单选按钮

1 个答案: