如果另一个用 javascript 选中，则取消选中一个复选框答案

【问题标题】：Uncheck a checkbox if another checked with javascript如果另一个用 javascript 选中，则取消选中一个复选框
【发布时间】：2019-02-06 12:00:05
【问题描述】：

我有两个复选框字段。使用 Javascript，我想确保只能勾选一个复选框。（例如，如果勾选了一个 checkbox1，如果勾选了 checkbox2，则 checkbox1 将取消勾选）

<input name="fries" type="checkbox" disabled="disabled" id="opt1"/>
<input type="checkbox" name="fries" id="opt2" disabled="disabled"/>

我还想在下面有一个单选按钮，如果单击它，我希望取消选中两个复选框。

 <input type="radio" name="o1" id="hotdog" onchange="setFries();"/>

最好的方法是编写一个函数，还是我可以使用 onclick 语句？

【问题讨论】：

也许反之亦然——两个收音机和一个复选框？
嗯，最好的办法就是使用单选按钮。
你为什么使用复选框而不是单选按钮？
单选按钮专门用于此目的。
又一个单选按钮的提议。

标签： javascript

【解决方案1】：

嗯，你应该使用单选按钮，但有些人喜欢复选框的外观，所以应该注意它。我在您的输入中添加了一个通用类：

function cbChange(obj) {
    var cbs = document.getElementsByClassName("cb");
    for (var i = 0; i < cbs.length; i++) {
        cbs[i].checked = false;
    }
    obj.checked = true;
}

演示：http://jsfiddle.net/5uUjj/

【讨论】：

如果你喜欢复选框的外观，最好用图片覆盖收音机。
非常感谢，正是我的意思。我特别想在这个例子中使用复选框。

【解决方案2】：

同样基于上面 tymeJV 的回答，如果您只想在单击一个复选框时停用另一个复选框，您可以这样做：

function cbChange(obj) {
var instate=(obj.checked);
    var cbs = document.getElementsByClassName("cb");
    for (var i = 0; i < cbs.length; i++) {
        cbs[i].checked = false;
    }
    if(instate)obj.checked = true;
}

tymeJV 的功能不允许您同时取消勾选 - 确实如此。（是的，奇怪但真实.. 有时你想要两个复选框而不是单选按钮是有语义的原因）

【讨论】：

【解决方案3】：

希望这会有所帮助：

function setFries(){
    var hotdog= document.getElementById("hotdog");
    var opt1= document.getElementById("opt1");
    var opt2 = document.getElementById("opt2");
    if(hotdog.checked){
      opt1.checked = false;
      opt2.checked = false;
    }else if(opt1.checked){
      opt2.checked = false;
     }else if(opt2.checked){
      opt1.checked = false;
    }
}

【讨论】：

【解决方案4】：

<input type="checkbox" name="fries" id="opt1" disabled="disabled" onclick="setFries(this);/>
<input type="checkbox" name="fries" id="opt2" disabled="disabled" onclick="setFries(this);/>
<input type="radio" name="o1" id="hotdog" onclick="setFries(this);"/>

请注意，我使用的是 onclick 事件：

function setFries(obj){
   var fries = document.getElementsByName('fries');
   if(obj.id =='hotdog') //Or check for obj.type == 'radio'
   {
      for(var i=0; i<fries.length; i++)
        fries[i].checked = true;
   }
   else{
      for(var i=0; i<fries.length; i++){
         if(fries[i].id != obj.id){
           fries[i].checked = !obj.checked;
           break;
         }
      }
   }
}

【讨论】：

【解决方案5】：

我找到的最简单的方法是根本不使用任何类型的代码。我在复选框属性中触发了一个动作。 1.鼠标向上重置表格。然后我取消选择（重置）我的所有字段都接受我想要的复选框。然后我为我的另一个复选框做了同样的事情以另一种方式。您基本上可以将复选框转换为切换或任何您想要的疯狂模式。

【讨论】：