iCheck 提供了回调事件,都可以用来监听 change 事件
事件名称 | 使用时机 |
ifClicked | 用户点击了自定义的输入框或与其相关联的label |
ifChanged | 输入框的 checked 或 disabled 状态改变了 |
ifChecked | 输入框的状态变为 checked |
ifUnchecked | checked 状态被移除 |
ifDisabled | 输入框状态变为 disabled |
ifEnabled | disabled 状态被移除 |
ifCreated | 输入框被应用了iCheck样式 |
ifDestroyed | iCheck样式被移除 |
关于iCheck控件点击事件的处理,其中有两个相关事件ifClicked和ifChanged
经过实验发现,ifClicked是点击的时候触发,此时check状态还没变化
ifChanged是状态变化后触发。
也就是说,当点击checkbox的时候,触发顺序是:
ifClicked事件-->checkbox check状态变化-->ifChanged事件
如果有其他逻辑触发iCheck的.iCheck('check')和.iCheck('uncheck'),改变状态时,会直接触发ifChanged事件,不会触发ifClicked。
--------------------------------------------------------------------------------------
方法
下面这些方法可以用来通过编程方式改变输入框状态(可以使用任何选择器):
$('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样式
重点说一下update方法,在icheck使用原生的js prop、attr等方法设定属性之后,一定要 update一下,否则icheck样式没有变化。
iCheck提供了一些方法,可以进行全选和反选的判定。
ifChecked:输入框的状态变为 checked
ifUnchecked:checked 状态被移除
ifChanged:输入框的 checked 或 disabled 状态改变了
var checkAll =$('input.all'); //全选的input var checkboxs =$('input.check'); //所有单选的input checkAll.on('ifChecked ifUnchecked',function(event){ if(event.type == 'ifChecked'){ checkboxs.iCheck('check'); }else{ checkboxs.iCheck('uncheck'); } }); checkboxs.on('ifChanged',function(event){ if(checkboxs.filter(':checked').length == checkboxs.length){ checkAll.prop('checked',true); }else{ checkAll.prop('checked',false); } checkAll.iCheck('update'); //上面用prop 方法设定 选中 取消选中之后 一定要 update一下,否则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();
});