jquery:实现全选和取消全选

时间:2022-12-03 07:31:22
 1 <input type="checkbox" id="all" />全选<br /> 
 2 <input type="checkbox" name="sub" />image1.jpg<br /> 
 3 <input type="checkbox" name="sub"/>image2.jpg<br /> 
 4 <input type="checkbox" name="sub"/>image3.jpg<br /> 
 5 <input type="checkbox" name="sub"/>image4.jpg<br /> 
 6 <script type="text/javascript">
 7   $(function() { 
 8     $('#all').on('click',function(){
 9       if(this.checked) {
10         $("input[name='sub']").attr('checked',true);
11       }else {
12         $("input[name='sub']").attr('checked',false);
13       }
14     });
15   }); 
16 </script>
用这个方法,在实现全选和取消全选中遇到了一个问题(这个问题出现在用jquery等动态添加内容时,点击全选后,再次点击取消全选,再次点击全选就不管用了,代码是这样的:
1 $("#left").append(
2     "<span>" + "全选" + "</span>" + "<input type=\"checkbox\" name=\"all\"  id=\"all\">");
3 $.each(json.filelist,function(i, item) {
4      $("#left").append(
5          "<span>" + item.name + "</span>" + "<input type=\"checkbox\" name=\"sub\">" + "</br>"); 
    });
在这种情况下,我又找到另外一种方法:
1 $("#all").on('click',function() {  
2       $("input[name='sub']").prop("checked", this.checked);  
3 });  
4     
5 $("input[name='sub']").on('click',function() {  
6       var $subs = $("input[name='sub']");  
7       $("#all").prop("checked" , $subs.length == $subs.filter(":checked").length ? true :false);  
8 }); 
推荐使用on绑定点击事件,因为on事件也适用于动态加载的元素