选择所有选中的复选框

Question

我使用通过使用此代码选择页面中所有的复选框：

$(function(){ 

    // add multiple select/deselect functionality 
    $("#selectall").click(function() { 
      $('.case').attr('checked', this.checked); 
    }); 

    // if all checkbox are selected, check the selectall checkbox 
    // and viceversa 
    $(".case").click(function(){ 

     if($(".case").length == $(".case:checked").length) { 
      $("#selectall").attr("checked", "checked"); 
     } else { 
      $("#selectall").removeAttr("checked"); 
     } 

    }); 
}); 

在这段代码中选择所有checkedbox。但是，如果我们选择一些复选框，并选择所有选择全部。在我们再次取消选中之后，除了上一个复选框之外，其余的都保持选中。

Answer 1

的$('.case').attr('checked', this.checked);的attr部分是不正确：复选框的当前选中的状态由checked属性表示。 checked属性只是the default checked state为input，而不是其当前的检查状态。 （就像value属性和value属性之间的差异）

要设置复选框的当前状态，使用prop：

$(function() { 
 

 
    // add multiple select/deselect functionality 
 
    $("#selectall").click(function() { 
 
     $('.case').prop('checked', this.checked); 
 
    }); 
 

 
    // if all checkbox are selected, check the selectall checkbox 
 
    // and viceversa 
 
    $(".case").click(function() { 
 
     $("#selectall").prop("checked", $(".case").length == $(".case:checked").length); 
 
    }); 
 
});

<div><label><input type="checkbox" class="case"> One</label></div> 
 
<div><label><input type="checkbox" class="case"> Two</label></div> 
 
<div><label><input type="checkbox" class="case"> Three</label></div> 
 
<div><label><input type="checkbox" class="case"> Four</label></div> 
 
<div><label><input id="selectall" type="checkbox"> ALL</label></div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>