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

我有以下一组复选框：

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>

函数OtherBox（it，box）
{
$（函数（）
{
$（'：复选框'）。单击（函数（）
{
如果（选中此项）
{
$（'.db'）.prop（'checked'，false）；
}
}
)
}
)
}

我试图做的是设置一些设置，这样当我选中“其他”复选框时，“原始”复选框都未选中。 然后我想要相反的结果，这样如果选中了一个（或多个）“原始”复选框，那么“其他”复选框将被取消选中

到目前为止，我使用的Javascript完成了第一部分的工作，如果我选中，然后取消选中，然后再次选中“其他”框，“原始”框将被取消选中。 但是，我希望它在第一次选中该框时工作

它还有一个意外的后果，即在选中“其他”框后，“原始”框拒绝被选中，即使我取消选中“其他”框

---

我发现了很多类似情况的例子，但没有一个是相同的，而且我没有能够适应我发现的任何情况。我怎样才能做到这一点呢？

使用以下JS代码：

<script type="text/javascript">

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

函数OtherBox（it，box）
{
如果（复选框）
{
$（'.db'）.prop（'checked'，false）；
}
}

使用以下JS代码：

<script type="text/javascript">

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

函数OtherBox（it，box）
{
如果（复选框）
{
$（'.db'）.prop（'checked'，false）；
}
}

您可以尝试类似的方法

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

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

这里是一个正在工作的jsfiddle

---

注意：我建议您避免在

id

S和

class

S中使用类似的名称，因为这可能会让人混淆

你可以试试这样的东西

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

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

这里是一个正在工作的jsfiddle

---

注意：我建议您避免在

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);
            }
        }
    });
});

---

工作示例-

您应该使用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);
            }
        }
    });
});

---

工作示例-

您有jQuery代码，可以接受jQuery解决方案吗？您有jQuery代码，可以接受jQuery解决方案吗？感谢您的回复。那很有魅力。我唯一需要更改的是将：$（window）.load（function（）{）添加到它的开头。感谢您的响应。这很有效。我唯一需要更改的是将：$（window）.load（function（）{添加到它的开头。