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事件也适用于动态加载的元素