iCheck插件属性方法

news/2024/11/7 20:07:31/

回调函数

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');  //全选的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();});


http://www.ppmy.cn/news/11466.html

相关文章

计算机网络学习笔记(三)传输层

文章目录1.概述2.多路复用与多路分解3.UDP4.TCP5.拥塞控制6.TCP拥塞控制1.概述 传输层协议在不同主机上的应用进程之间提供了逻辑通信功能。传输层协议是在端系统中而不是在路由器实现的。在发送端,传输层将发送应用程序进程接收到的报文转换为传输层分组&#xff0…

【TypeScript】 函数 (4)

函数(More On Functions) 函数是任何应用的基础组成部分,无论它是局部函数(local functions),还是从其他模块导入的函数,亦或是类中的方法。当然,函数也是值 (values),而且像其他值一样,TypeScript 有很多种方式用来描述,函数可以以怎样的方式被调用。让我们来学习一…

yolov8训练自己的数据集

太卷了!!!! 太卷了!!!!太卷了!!!!!太卷了!!!!!太卷了&#xff…

Python正则表达式

正则表达式正则表达式1、正则表达式概述2、re模块3、Match对象4、正则表达式5、表示字符6、转义字符7、表示数量8、表示边界9、表示分组10、RE模块高级使用11、贪婪与非贪婪(业务默认也是贪婪的去匹配查询)练习正则表达式 1、正则表达式概述 正则表达式…

指针进阶(C语言)

目录 字符指针 使用方法: 1、指向字符 2、指向字符串的首地址 指针数组 数组指针 数组指针的定义 数组名表示的含义 数组指针的使用 数组参数、指针参数 一位数组传参 二维数组传参 一级指针传参 二级指针传参 函数指针 函数指针数组 指向函数指针数组的指针 回调函…

座舱显示的未来到底是什么?宝马供应商给出了答案

“显示器是汽车的核心人机界面,”业内人士表示,与此同时更智能化、体验更好的显示解决方案在驾驶舱的设计中起着核心作用。 屏幕及其增强驾驶体验的巨大潜力正迅速成为未来智能网联汽车DNA的一部分。高分辨率、大尺寸以及曲面屏、OLED屏等等新元素&…

【JavaSE】初识Java

初识JavaBIT-1 初识Java前言1. Java语言概述1.1 Java是什么1.2 Java语言的重要性1.3 Java语言发展简史1.4 Java语言特性2. 初识Java的main方法2.1 main方法示例2.2 运行Java程序3. 注释3.1 基本规则3.2 注释规范4. 标识符5. 关键字BIT-1 初识Java 【本节目标】 Java语言简介、…

【数据结构】顺序表

1.线性表线性表(linear list)是n个具有相同特性的数据元素的有限序列。 线性表是一种在实际中广泛使用的数据结构,常见的线性表:顺序表、链表、栈、队列、字符串...线性表在逻辑上是线性结构,也就说是连续的一条直线。…