input[type='checkbox']全选反选

input[type='checkbox']全选反选，在开发过程中经常遇到，为了方便，在此总结一下，并做函数封装。

未封装

html代码

<label class="labelAll"><input type="checkbox" name="" value=""><span>全选</span></label>

<label class="labelOne"><input type="checkbox" name="" value=""><span>今天星期一</span><a href="javascript:;">删除</a></label>

<label class="labelOne"><input type="checkbox" name="" value=""><span>今天星期二</span><a href="javascript:;">删除</a></label>

<label class="labelOne"><input type="checkbox" name="" value=""><span>今天星期三</span><a href="javascript:;">删除</a></label>

<label class="labelOne"><input type="checkbox" name="" value=""><span>今天星期四</span><a href="javascript:;">删除</a></label>

<label class="labelOne"><input type="checkbox" name="" value=""><span>今天星期五</span><a href="javascript:;">删除</a></label>

<label class="labelOne"><input type="checkbox" name="" value=""><span>今天星期六</span><a href="javascript:;">删除</a></label>

<label class="labelOne"><input type="checkbox" name="" value=""><span>今天星期七</span><a href="javascript:;">删除</a></label>

css样式

/* 内容 */
.labelAll{
    display:block;
    height:60px;
    background: #eee;
    line-height: 60px;
    padding:0 0 0 20px;
}
.labelAll input{
    margin-right: 10px;
}
.labelOne{
    display:inline-block;
    width: 33.33%;
    height:60px;
    background: #eee;
    line-height: 60px;
    padding:0 0 0 20px;
    margin:20px 10px;
}
.labelOne a{
    margin-left: 20px;
}
.labelOne input{
    margin-right: 10px;
}

核心 js 部分

// 未封装
    // 全选、反选
    $('.labelAll input').click(function (event) {
        if($(this).attr('checked')){
            $(this).attr('checked',false);
            $(".labelOne input").attr({'checked': false})
            $(".labelOne input").prop({'checked': false})
        }else{
            $(this).attr('checked',true)
            $(".labelOne input").attr({'checked': true})
            $(".labelOne input").prop({'checked': true})
        }
    })

    // 单个选择
    $(".labelOne input").click(function(event) {
        var flag = false;
        if($(this).attr('checked')){
            $(this).attr('checked',false);

        }else{
            $(this).attr('checked',true)

        }
        $('.labelOne input').each(function(index, val) {
             if($(val).attr('checked')){
                 flag = true;
             }else{
                 flag = false;
                 return false;
             }
        });
        if (flag) {
            $('.labelAll input').attr('checked', true);
            $('.labelAll input').prop('checked', true);
            console.log(flag);
        }else{
            $('.labelAll input').attr('checked', false);
            $('.labelAll input').prop('checked', false);
            console.log(flag);
        }
    });

这就可以了。element元素上能够添加checked,页面也有勾选与不勾选样式。

函数封装

html、css都是一样的，单独看一下js

// 函数封装
// 点击事件，最好加到元素本身上------这里点击input,所以，应该加到input元素
    // 全选
    function allChecked(inputEle_all,inputEle_one){
        $(inputEle_all).click(function(event) {
            if($(this).attr('checked')){
                $(this).attr('checked',false);
                $(inputEle_one).attr({'checked': false})
                $(inputEle_one).prop({'checked': false})
            }else{
                $(this).attr('checked',true)
                $(inputEle_one).attr({'checked': true})
                $(inputEle_one).prop({'checked': true})
            }
        });
    }
    // 单个选择
    function oneChecked(inputEle_all,inputEle_one){
        $(inputEle_one).click(function(event) {
            var flag = false;
            if($(this).attr('checked')){
                $(this).attr('checked',false);
            }else{
                $(this).attr('checked',true)
            }
            $(inputEle_one).each(function(index, val) {
                 if($(val).attr('checked')){
                     flag = true;
                 }else{
                     flag = false;
                     return false;
                 }
            });
            if (flag) {
                $(inputEle_all).attr('checked', true);
                $(inputEle_all).prop('checked', true);
            }else{
                $(inputEle_all).attr('checked', false);
                $(inputEle_all).prop('checked', false);
            }
        });
    }

    // 调用函数
    // 全选
    allChecked('.labelAll input','.labelOne input');
    // 单个选择
    oneChecked('.labelAll input','.labelOne input');

ps:不要忘了引入jquery哦！