JavaScript复选框取消选中

我有以下组复选框其它框，反之亦然：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>

我所试图做的是建立成才了所以当我检查'其他'复选框时，'原始'复选框都未选中。然后我想要反过来，这样如果一个（或多个）'原始'复选框被选中，'其他'复选框未被选中。

Javascript我到目前为止有这样做的第一部分，如果我检查，然后取消选中，然后再次检查'其他'框，'原始'框未选中。但是，我希望它在第一次检查盒子时工作。

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

我发现了很多类似情况的例子，但都不一样，而且我还没有能够适应我发现的任何情况。我该怎么做？

来源

2013-05-22 IGGt

您在那里有jQuery代码，jQuery解决方案是否可以接受？ –

你可以尝试这样的事情

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

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

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

附：：我建议你避免使用类似的名字beetwen id s和class s，因为它可能会令人困惑。

来源

2013-05-22 13:51:12 steo

感谢您的回应。那工作很有魅力。我唯一需要改变的地方是添加：$（window）.load（function（）{到开头。 – IGGt

很高兴它解决了 – steo

使用下面的JS代码：

<script type="text/javascript"> 

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

来源

2013-05-22 13:50:42

你应该使用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-22 13:55:06

JavaScript复选框取消选中

回答

相关问题