当前位置: 首页 > 工具软件 > icheck > 使用案例 >

iCheck插件属性方法

孙德本
2023-12-01

回调函数

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

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

关于iCheck控件点击事件的处理,其中有两个相关事件ifClickedifChanged

经过实验发现,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();

});

 类似资料: