HTML checkbox 多选框 jQuery ；attr()和prop();

        最近写前端页面需要用到批量操作，这里使用checkbox、js主要用到attr()和prop()，这两个函数存在异同，为什么同时用两个下面详细说明。

首先说HTML，这里多选框是隐藏状态，点击批量操作显示所有checkbox。这个简单不多说，css自己调。

给全选id="all-collect":

<input  type="checkbox" id="all-collect" value="false" />

下面所有选项给class="all-collect"

<input class="all-collect" type="checkbox" message_id="{{ record.id }}" value=""/>

js:通过value值来判断是要全选还是取消全选。

    $("#all-collect").click(function () {
        var that = $(this);
        console.log( $("#all-collect").val());
        if( that.val() == 'false'){
            # 遍历所有选项，如果未被选中，将checked属性置为true
            $('.all-collect').each(function(){
                if($(this).attr('checked') != 'checked' ){
                    $(this).attr('checked', true);
                    $(this).prop('checked', true);
                }
            })
            $("#all-collect").val('true');
        }
        else{
            $('.all-collect').each(function(){
                if($(this).attr('checked') == 'checked' ){
                    $(this).attr('checked', false);
                    $(this).prop('checked', false);
                }
            })
            $("#all-collect").val('false');
        }
    });

    $(".all-collect").click(function(){
        #点击某个选项时，如果已被选中，将checked属性置为false；并检查全选是否被选中，然后移除checked属性，并将value改为false
        if($(this).attr('checked')){
            $(this).attr('checked', false);
            $(this).prop('checked', false);
            $("#all-collect").prop('checked', false);
            $("#all-collect").val('false')
        }
        else {
        #如果未被选中，将checked属性置为true;并遍历所有的checkbox，如果全被选中，将全选按钮选择框的checked属性置为true。
            $(this).attr('checked', true);
            var all_has_collected = true;
            $('.all-collect').each(function(){
                if($(this).attr('checked') != 'checked' ){
                    all_has_collected = false;
                }
            })
            if(all_has_collected){
                $("#all-collect").prop('checked', true);
                $("#all-collect").val('true');
            };

        }
    })

 

这里同时使用attr()和prop()并不多余，atrr()主要用来rewrite checked属性的值，prop()主要用来remove 页面效果。如果只用attr(),当全选和单独选择某些选项混用的时候，会发现某些选项的checked属性被修改但是页面没有效果并没有改变。

所以结合起来使，页面效果也很友善，好评。

根据官方的建议：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()；