jquery:实现全选和取消全选

jquery:用jquery实现全选和取消全选

1、目前我遇到的最简单的一种方法，如果有更好的方法，大家可以分享一下

<input type="checkbox" id="all" />全选<br />  
<input type="checkbox" name="sub" />image1.jpg<br />  
<input type="checkbox" name="sub"/>image2.jpg<br />  
<input type="checkbox" name="sub"/>image3.jpg<br />  
<input type="checkbox" name="sub"/>image4.jpg<br />  
<script type="text/javascript">
      $(function() {  
        $('#all').on('click',function(){
            if(this.checked) {
                $("input[name='sub']").attr('checked',true);
            }else {
                $("input[name='sub']").attr('checked',false);
            }
        });
     });  
</script>

用这个方法，在实现全选和取消全选中遇到了一个问题(这个问题出现在用jquery等动态添加内容时，点击全选后，再次点击取消全选，再次点击全选就不管用了，代码是这样的：

$("#left").append(
    "<span>" + "全选" + "</span>" + "<input type=\"checkbox\" name=\"all\"  id=\"all\">");
$.each(json.filelist,function(i, item) {
     $("#left").append(
         "<span>" + item.name + "</span>" + "<input type=\"checkbox\" name=\"sub\">" + "</br>"); });

在这种情况下，我又找到另外一种方法：

$("#all").on('click',function() {  
      $("input[name='sub']").prop("checked", this.checked);  
});  
    
$("input[name='sub']").on('click',function() {  
      var $subs = $("input[name='sub']");  
      $("#all").prop("checked" , $subs.length == $subs.filter(":checked").length ? true :false);  
}); 

推荐大家使用on绑定点击事件，因为on事件也适用于动态加载的元素