Question

我有以下一组复选框：

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>

我要做的是设置一些内容，这样当我选中“其他”复选框时，“原始”复选框都是未选中的。然后我想要反过来，这样如果选中一个（或多个）“原始”复选框，则不选中“其他”复选框。

到目前为止，Javascript的第一部分是如此，如果我检查，然后取消选中，然后再次检查“其他”框，则“原始”框未选中。但是，我希望第一次检查框时能够正常工作。

它还有一个意想不到的后果，即在“其他”框被选中后，即使我取消选中“其他”框，也会拒绝检查“原始”框。

我发现了许多类似情况的例子，但却没有相同的情况，而且我无法适应任何我发现的情况。我该怎么办呢？

Answer 1

你可以尝试类似的东西

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

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

这是一个有效的 jsfiddle http://jsfiddle.net/vQTFm/

P.S。：我建议你避免使用类似名称beetwen id和class s，因为它可能令人困惑。

Answer 2

您应该使用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/

Answer 3

使用以下JS代码：

<script type="text/javascript">

    function otherBoxes(it,box)
  {
     if (box.checked) 
      {
          $('.db').prop('checked',false);
      }
  }
    </script>

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

3 个答案: