jquery中关于复选框的应用

第一种方法：根据变量flag去改变checkall,要在each加入return false,并且attr-->prop

//全选
     $("#CheckedAll").click(function(){
            if(this.checked){                 //如果当前点击的多选框被选中
                 $('input[type=checkbox][name=items]').attr("checked", true );
            }else{                                
                 $('input[type=checkbox][name=items]').attr("checked", false );
            }
     });
     $('input[type=checkbox][name=items]').click(function(){
               var flag=true;
               $('input[type=checkbox][name=items]').each(function(){
                    if(!this.checked){
                         flag = false;
 return false;
                    }
               });

               if( flag ){
                     $('#CheckedAll').attr('checked', true );
               }else{
                     $('#CheckedAll').attr('checked', false );
               }
     });
      //输出值
    $("#send").click(function(){
        var str="你选中的是：\r\n";
        $('input[type=checkbox][name=items]:checked').each(function(){
            str+=$(this).val()+"\r\n";
        })
        alert(str);
    });

 

第二种方法：根据选checkbox组的长度与实际长度判断

  //全选
     $("#CheckedAll").click(function(){
            //所有checkbox跟着全选的checkbox走。
            $('[name=items]:checkbox').attr("checked", this.checked );
     });
     $('[name=items]:checkbox').click(function(){
                //定义一个临时变量，避免重复使用同一个选择器选择页面中的元素，提升程序效率。
                var $tmp=$('[name=items]:checkbox');
                //用filter方法筛选出选中的复选框。并直接给CheckedAll赋值。
                $('#CheckedAll').attr('checked',$tmp.length==$tmp.filter(':checked').length);

            /*
                //一行做过多的事情需要写更多注释。复杂选择器还可能影响效率。因此不推荐如下写法。
                $('#CheckedAll').attr('checked',!$('[name=items]:checkbox').filter(':not(:checked)').length);
            */
     });
      //输出值
    $("#send").click(function(){
        var str="你选中的是：\r\n";
        $('[name=items]:checkbox:checked').each(function(){
            str+=$(this).val()+"\r\n";
        })
        alert(str);
    });

 

 

 

 

 $("#CheckedAll").click(function () {     

$('input[type=checkbox][name=items]').prop("checked", this.checked);

 });

 $('input[type=checkbox][name=items]').click(function () {    

  $('#CheckedAll').prop(  'checked',   

   $('input[type=checkbox][name=items]:not(:checked)').length === 0);  });

 

 

 //通过点击单个checbox影响全选按钮
    $('#UnOverRateGrid').on('click', '.selectUnOverRateCheckBox', function() {
        var flag = true;
        $('.selectUnOverRateCheckBox').each(function() {
            if (!this.checked) {
                flag = false;
                return false;
            }
        });
        $('#SelectAllUnOverRate').prop('checked', flag);
    });