jquery----icheck插件

给checkbox添加样式

1、引入
文件iCheck自己下载；

<link rel="stylesheet" href="/static/assets/plugins/iCheck/all.css">

<script src="/static/assets/plugins/iCheck/icheck.min.js"></script>

2、激活

var Ichick = function(){
    var handle = function() {
        $('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
            checkboxClass: 'icheckbox_flat-green',
            radioClass   : 'iradio_flat-green'
        })
    }
    return{
        init:function(){
            handle();
        }
    }
}();
$(document).ready(function () {
    Ichick.init();
})

　　

<input type="checkbox" class="flat-red">

　　

参考样式：

 

全选

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'); — toggle checked state

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

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

$('input').iCheck('update'); — apply input changes, which were done outside the plugin

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

 

使用示例：

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

$(document).ready(function () {
    //Validate.init();
    //Ichick.init();
    console.log($('input[type="checkbox"].flat-red.icheck_master'))
    $('input[type="checkbox"].flat-red.icheck_master').on('ifChecked', function(event){
        $('input[type="checkbox"].flat-red').iCheck('check');
    })
    $('input[type="checkbox"].flat-red.icheck_master').on('ifUnchecked', function(event){
        $('input[type="checkbox"].flat-red').iCheck('uncheck');
    })
})

或者

_checkboxMaster = $(".checkbox-master");
_checkbox = $("tbody").find("[type='checkbox']").not("[disabled]");
_checkboxMaster.on("ifClicked", function (e) {
    // 当前状态已选中，点击后应取消选择
    if (e.target.checked) {
        _checkbox.iCheck("uncheck");
    }

    // 当前状态未选中，点击后应全选
    else {
        _checkbox.iCheck("check");
    }
});

　　

判断是否选中

_checkbox.each(function () {
    // 判断是否选中
   var delFlag = $(this).is(":checked");
   if (delFlag) {
       _idArray.push($(this).attr("id"));
   }
});