单击第一个子项后，选中所有复选框错误

check all checkbox bug after clicking first child

本文关键字：复选框 错误 第一个 单击      更新时间：2023-09-26

$("#main").click(function(e) {
  $('.child').prop('checked', !$('.child').prop("checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="main" type="checkbox">
<br>
<br>
<input class="child" type="checkbox">
<br>
<input class="child" type="checkbox">
<br>
<input class="child" type="checkbox">
<br>
<input class="child" type="checkbox">
<br>

我在执行全部检查功能时遇到问题。当我点击#main时，一切都很好，即使切换也可以。但试着先点击第一个孩子，然后点击#main，我在那里经历了一种奇怪的行为。2、3或4个孩子的复选框不会出现这种情况，为什么会出现这种情况？

使用$(this)代替$('.child')。

或者使用@Balachandran建议的$('.child').prop('checked', this.checked);：-

$("#main").click(function(e){       
    $('.child').prop('checked',$(this).prop("checked"));
});
$(".child").change(function(e){     
   if($('.child:checked').length== $('.child').length){
        $('#main').prop('checked',true);
   } else{
     $('#main').prop('checked',false);
   }
//or more short you can use
 $('#main').prop('checked',$('.child:checked').length== $('.child').length);
   
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="main" type="checkbox">
<br><br>
<input class="child" type="checkbox">
    <br>
<input class="child" type="checkbox"><br>
<input class="child" type="checkbox"><br>
<input class="child" type="checkbox"><br>

相关文章：