Javascript复选框取消选中其他复选框，反之亦然

Javascript check box to uncheck other boxes and vice versa

本文关键字：复选框 反之亦然 其他 取消 Javascript      更新时间：2023-09-26

我有以下一组复选框:

Original:
<INPUT TYPE="checkbox" ID="db1" class="db" checked>
<INPUT TYPE="checkbox" ID="db2" class="db" checked>
<INPUT TYPE="checkbox" ID="db3" class="db" checked>
<INPUT TYPE="checkbox" ID="db4" class="db" checked>
</br>
Other:
<INPUT TYPE="checkbox" ID="other" class="other" onclick="otherBoxes('other',this)">

和以下javascript:

<script language="JavaScript" src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function otherBoxes(it,box)
  {
    $(function()
      {
        $(':checkbox').click(function()
          {
            if (this.checked) 
              {
                $('.db').prop('checked',false);
              }
          }
        )
      }
    )
  }
</script>

我要做的是设置一些东西，这样当我选中"其他"复选框时，"原始"复选框都未选中。然后我想有相反的，这样，如果一个(或多个)'Original'复选框被选中，'other'复选框被选中。

到目前为止，我所拥有的Javascript完成了第一部分，如果我选中，然后取消选中，然后再次选中'other'框，'Original'框未选中。但是，我希望它能在第一次选中复选框时工作。

它也有意想不到的后果，在'other'复选框被选中后，'original'复选框拒绝被选中，即使我取消'other'复选框。

我发现了很多类似情况的例子，但没有一个是相同的，我还没有能够适应我发现的任何一个。请问我该怎么做?

你可以试试这样做

$('.other').on('click' , function() {
 $('.db').each(function(){
    $(this).removeAttr('checked');
 })
});
$('.db').on('click', function(){
    $('.other').removeAttr('checked');
});

这里是一个工作的jsfiddle http://jsfiddle.net/vQTFm/

注:我建议你避免在id s和class s之间使用相似的名称，因为它可能会混淆。

您应该使用jQuery而不是在HTML中绑定事件。

这里是一些代码，做你想要的，它绑定到复选框上的变化事件，然后检查是否它是other或db复选框被选中和取消选中所需的复选框:

$(function() {
    $('.db, #other').on('change', function() {
        if (this.checked) {
            if ($(this).is('#other')) {
                $('input:checkbox').not('#other').prop('checked', false);
            } else {
                $('#other').prop('checked', false);
            }
        }
    });
});

工作示例- http://jsfiddle.net/YD5SE/2/

使用以下JS代码:

<script type="text/javascript">
    function otherBoxes(it,box)
  {
     if (box.checked) 
      {
          $('.db').prop('checked',false);
      }
  }
    </script>
相关文章：