当另一个复选框被选中时，取消复选框，但如果被选中，也取消复选框

JS: uncheck box when another is checked but also uncheck itself if checked

本文关键字：复选框 取消 如果 另一个      更新时间：2023-09-26

我有三个复选框。我已经使用了我在这里找到的一段代码，当选中一个时取消选中其他两个。

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

我在复选框中使用这个来切换状态:onchange="cbChange(this)"。

但是，我还需要提供一种我不希望选中任何框的情况。虽然我可以通过添加一个单独的按钮或复选框来做到这一点，但我想知道是否可以修改上述代码或添加另一个函数，允许通过onclick事件取消已经选中的框。

我试着添加这个函数(再次发现这里)，但它不会工作:

function cbUncheck(obj)
    {
        if (obj.checked == false)
        {
            document.getElementByClassName("cb").checked = false;
        }
    }

我使用这个复选框代码:onclick="cbUncheck(this);"

建议欢迎!谢谢!

您需要检查第一个复选框是否勾选。如果复选框没有被选中，那么不需要做任何事情否则取消其他复选框

 <input id="chk1" class="cb" type="checkbox" value="01" onchange='cbChange(this)' />
  <label for="chk1" >1</label>

  <input id="chk2" class="cb" type="checkbox" value="01" onchange='cbChange(this)' />
  <label for="chk2" >1</label>

  <input id="chk3" class="cb" type="checkbox" value="01" onchange='cbChange(this)' />
  <label for="chk3" >1</label>
javascript 

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

JS BIN JSBIN示例

您可以使用单选按钮，以便只能选择一个(不需要脚本)。然后，如果出现其他情况，则清除两者(下面以按钮为例):

<form>
  <input  type="radio" name="foo" value="0">zero<br>
  <input  type="radio" name="foo" value="1">one<br>
  <button type="button" onclick="clearRadios(this.form.foo)">Clear radios</button>
</form>

功能:

function clearRadios(radioGroup) {
  for (var i=0; i<radioGroup.length; i++) {
    radioGroup[i].checked = false;
  }
}

如果您不希望用户检查无线电，禁用它们。

下面的代码简单地给出了您需要的解决方案。

 this.scan=function(index)
 {
  if( this.boxGroup[ index ].checked )
   for(var i=0, g=this.boxGroup, len=g.length; i<len; i++)
    if( i != index )
     g[i].checked = false;
 }

工作演示见jsfiddle

相关文章：