复选框的全选操作

Html

Css

'use strict';
function self_checkboxAll(obj){
    /*
    * 调用时参数以对象的形式传入：
    * {{checkbox_all:"checkbox_all_name",checkbox_single:"checkbox_single_name"}};
    * 1.控制全选的复选框：checkbox_all；
    * 2.控制单选的复选框：checkbox_single
    * */
    let _this=this;
    this.$checkbox_all=obj.checkbox_all;
    this.$checkbox_single=obj.checkbox_single;
    this._checkbox_single_length=this.$checkbox_single.length;

this._checkboxAll=function() {
        _this.$checkbox_single.each(function(i){
            let isChecked=$(this).is(':checked');
            if(isChecked){
                $(this).removeProp("checked");
            }else{
                $(this).prop("checked",true);
            }
        });
    };
    this._checkboxSingle=function(){
        let isChecked_single_length=0;
        _this.$checkbox_single.each(function(i){
            let isChecked=$(this).is(':checked');
            if(isChecked){
                isChecked_single_length++;
            }
        });
        if(_this._checkbox_single_length==isChecked_single_length){
            _this.$checkbox_all.prop("checked",true);
        }else{
            _this.$checkbox_all.removeProp("checked");
        }
    };

this.$checkbox_all.unbind("click").bind("click", _this._checkboxAll);
    this.$checkbox_single.unbind("click").bind("click", _this._checkboxSingle);
}

let checkbox_all=$("#checkbox_all");
let checkbox_single=$("input[name='checkbox_single']");
let self_checkboxall=new self_checkboxAll({checkbox_all:checkbox_all,checkbox_single:checkbox_single});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.9.1

立即下载

复选框的全选操作



代码描述：js复选框的全选反选操作

/* * 调用时参数以对象的形式传入： * {{checkbox_all:"checkbox_all_name",checkbox_single:"checkbox_single_name"}}; * 1.控制全选的复选框：checkbox_all； * 2.控制单选的复选框：checkbox_single * */
注意：使用prop以及removeProp控制复选框的选择状态,不要使用attr或者removeAttr;

2

最新

发表评论全部评论

暂时没有评论！

为未来而奋斗0

2017/12/4 19:24:07

有bug,更适合反选
回复

semitree0

2017/11/17 10:47:03

这个效果更接近于反选回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

爱上食人鲨的女孩

相关代码

复选框的全选操作

最新