0

我有以下一组复选框：

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 完成了第一部分，如果我选中，然后取消选中，然后再次选中“其他”框，则“原始”框未选中。但是，我希望它在第一次选中该框时起作用。

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

我发现了很多类似情况的例子，但都不相同，而且我无法适应我发现的任何例子。请问我该怎么做？

4

3 回答 3

3

你可以尝试类似的东西

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

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

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

PS：我建议您避免使用相似的名称 beetwen ids 和classs 因为它可能会造成混淆。

于 2013-05-22T13:51:12.990 回答
1

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

于 2013-05-22T13:55:06.890 回答
0

使用以下 JS 代码：

<script type="text/javascript">

    function otherBoxes(it,box)
  {
     if (box.checked) 
      {
          $('.db').prop('checked',false);
      }
  }
    </script>
于 2013-05-22T13:50:42.753 回答