Jquery iCheck

表单复选框、单选框控件美化插件

主要作用为:

渲染并美化当前页面的复选框或单选框

响应复选框或单选框的点击事件

页面引用

<!-- iCheck for checkboxes and radio inputs css-->
<link rel="stylesheet" href="/static/assets/plugins/iCheck/all.css">
<!-- iCheck 1.0.1 js-->
<script src="/static/assets/plugins/iCheck/icheck.min.js"></script>

激活 iCheck

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

CSS 部分

<input type="checkbox" class="minimal" />

JS 部分

// 激活 iCheck
$('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 样式被移除

使用 on() 方法绑定事件：

Example

$('input').on('ifChecked', function(event){
  alert(event.type + ' callback');
});

方法

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

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

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

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

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

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

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

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

iCheck 抽取后

//ICheck工具类  用了dataTables init方法必须重绘-----统一的全选与反选 批量删除
var ICheck=function () {
    //批量选择框对象 class属性 icheck all
    var allCheck=$('input[type="checkbox"].icheck.all');
    //单个选择框对象 class属性 icheck each
    var eachCheck;
    //初始化ICheck
    var initICheck=function () {
        //初始化ICheck样式
        $('input[type="checkbox"].icheck').iCheck({
            checkboxClass: 'icheckbox_minimal-purple'
        });
    };
    //全选 反选
    var check=function () {
        eachCheck=$('input[type="checkbox"].icheck.each');
        //全选被点击时执行
        allCheck.on('ifClicked', function(e){
            //如果全选被选中
            if (!e.target.checked){
                //让其他也全选中
                eachCheck.iCheck('check');
            }
            else {
                eachCheck.iCheck('uncheck');
            }
        });
        //子选择框点击事件 触发主选择框
        eachCheck.on('ifClicked', function(e){
            var length=1;
            if(e.target.checked){
                allCheck.iCheck('uncheck');
            }
            else{
                eachCheck.each(function () {
                    if(($(this).prop("checked"))){
                        length++;
                    }
                });
                if(eachCheck.length===length){
                    allCheck.iCheck('check');
                }
            }
        })
    };
    //删除操作 多个删除与单个删除   url/删除的ajax请求地址  id/单删除时的id
    var delCheck=function (url,id) {
        var _idArray; //保存id的数组
        var l; //数组的长度
        del(url,id);

        //私有函数中的私有函数 只能这个私有函数调用
        function del(url,id){
            //获取选中的id并保存到数组_idArray
            _idArray=new Array();
            eachCheck.each(function () {
                // 判断是否选中
                var delFlag = $(this).is(":checked");
                if (delFlag) {
                    _idArray.push($(this).attr("id"));
                }
            });
            //保存单选时传的id  不为空时先清除打钩的
            if(id!=null&&id!=""){
                _idArray=[];
                _idArray.push(id);
            }
            l=_idArray.length;
            //没有选择删除项
            if (l===0){
                $("#modal-message").html("至少删除一项");
            }
            else{
                $("#modal-message").html("确定删除么");
            }
            //显示模态框
            $("#basic").modal("show");
        }
        //模态框点击确定操作
        $(".modal-footer .btn.green").bind("click",function () {
            if(l===0){
                $("#basic").modal("hide");
            }
            //有id时提交请求
            else{
                $.ajax({
                    "url":url,
                    "data":{"ids":_idArray.toString()},
                    "type":"POST",
                    "dataType":"JSON",
                    "success":function (data) {
                        $("#modal-message").html(data.message);
                        $(".modal-content .modal-footer").html("");
                        $("#basic").modal("show");
                        setTimeout(function () {
                            window.location.reload();
                        },500);
                    }
                });
            }
        });
    };

    return{
        init:function () {
            initICheck();
            check();
        },
        delCheck:function (url,id) {
            delCheck(url,id);
        }
    }
}();

jQuery(document).ready(function () {
    ICheck.init();
});