使用iCheck插件实现全选反选功能

iCheck 表单复选框、单选框控件美化插件，主要作用为：

• 渲染并美化当前页面的复选框或单选框
• 响应复选框或单选框的点击事件

官网：http://www.bootcss.com/p/icheck/ 官网讲解的更仔细，插件可以在里面下载。
进入正题：

页面引用

CSS部分

 <%--Icheck--%>
 <link href="/static/assets/global/plugins/icheck/skins/all.css" rel="stylesheet" type="text/css" />

JS部分

<%--Icheck--%>
<script src="/static/assets/global/plugins/icheck/icheck.min.js" type="text/javascript"></script>

激活ICheck

默认情况下 iCheck 是不生效的，需要使用 JS 代码激活，此过程可以指定 iCheck 的皮肤，案例代码如下：

CSS部分

 <input  type="checkbox" class="minimal checkbox-master"/>
 <input  type="checkbox" class="minimal checkbox-son"/>

JS部分

 /*激活ICheck*/
    var handlerInitIcheckBox = function () {
        $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
            checkboxClass: 'icheckbox_minimal-blue',
            radioClass: 'iradio_minimal-blue'

        });
    };

回调函数

iCheck 提供了大量回调事件，都可以用来监听 change 事件

事件名称	使用时机
ifClicked	用户点击了自定义的输入框或与其相关联的 label
ifChanged	输入框的 checked 或 disabled 状态改变了
ifChecked	输入框的状态变为 checked
ifUnchecked	checked 状态被移除
ifDisabled	输入框状态变为 disabled
ifEnabled	disabled 状态被移除
ifCreated	输入框被应用了 iCheck 样式
ifDestroyed	iCheck 样式被移除

方法

下面这些方法可以用来通过编程方式改变输入框状态（可以使用任何选择器）：

• $('input').iCheck('check');：将输入框的状态设置为 checked

• $('input').iCheck('uncheck');：移除 checked 状态

• $('input').iCheck('toggle');：

  扫描二维码关注公众号，回复： 5129118 查看本文章

• $('input').iCheck('disable');：将输入框的状态设置为 disabled

• $('input').iCheck('enable');：移除 disabled 状态

• $('input').iCheck('update');：

• $('input').iCheck('destroy');：移除 iCheck 样式

下面是自己封装的一个JQuery，直接在页面引用就可以使用：

/**
 * iCheck全选反选
 * @type {{initIcheckBox}}
 */
var IcheckBox = function () {
    //Icheck
    var _masterCheckBox;
    var _CheckBox;

    //用于存放ID的数组
    var idArray;

    /*激活ICheck*/
    var handlerInitIcheckBox = function () {
        $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
            checkboxClass: ' icheckbox_minimal-blue',
            radioClass: 'iradio_minimal-blue'
        });
    };
    /*控制全选*/
    var handllerIcheckAll = function () {
        _masterCheckBox = $('input[type="checkbox"].minimal.checkbox-master');
        _CheckBox = $('input[type="checkbox"].minimal.checkbox-son');

        _masterCheckBox.on("ifClicked", function (e) {
            //返回true表示未选中
            if (e.target.checked) {
                _CheckBox.iCheck('uncheck');
            }

            //选中状态
            else {
                _CheckBox.iCheck('check');
            }
        });

    };
    /*反选*/
    var handlerReIcheck = function () {
        _CheckBox.on("ifChanged", function (e) {
            var lengths = _CheckBox.length;
            //选择数量等于全部数量
            if (_CheckBox.filter(':checked').length == lengths) {
                _masterCheckBox.prop('checked', true);
            }
            else {
                _masterCheckBox.removeProp('checked');
                //也可以用下面写法
                /*_masterCheckBox.prop('checked', false);*/
            }
            _masterCheckBox.iCheck('update');
        })
    };

    return {
        initIcheckBox: function () {
            handlerInitIcheckBox();
            handllerIcheckAll();
            handlerReIcheck();
        }
    }
}();
jQuery(document).ready(function () {
    IcheckBox.initIcheckBox();

});