回调函数
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'); //全选的inputvar checkboxs =$('input.check'); //所有单选的inputcheckAll.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 () {//Icheckvar _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();});