iCheck事件与样式操作

一、iCheck绑定事件

iCheck提供了大量回调事件，支持所有选择器（selectors），并且只针对复选框checkbox和单选radio按钮起作用。

事件名称	触发原因
ifClicked	用户点击了自定义的输入框或与其相关联的label
ifChanged	输入框的 checked 或 disabled 状态改变了
ifChecked	输入框的状态变为 checked
ifUnchecked	checked 状态被移除
ifDisabled	输入框状态变为 disabled
ifEnabled	disabled 状态被移除
ifCreated	输入框被应用了iCheck样式
ifDestroyed	iCheck样式被移除

用法

$(document).on("ifChanged", ".className", function () {if($(this).is(":checked")){alert("我被选中了");}else{alert("我被取消选中了");}
});/**
* 说明：
* ifChanged 可以替换成你需要的事件名称
* .className 可以替换成你的选择器
*/

二、 iCheck特点

1、在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括桌面和移动设备

2、支持触摸设备 — iOS、Android、BlackBerry、Windows Phone等系统

4、方便定制 — 用HTML 和 CSS 即可为其设置样式 (多套皮肤)

5、体积小巧 — gzip压缩后只有1 kb

6、25 种参数用来定制复选框（checkbox）和单选按钮（radio button）

7、8 个回调事件用来监听输入框的状态

8、7个方法用来通过编程方式控制输入框的状态

9、能够将输入框的状态变化同步回原始输入框中，支持所有选择器

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样式

三、移除数组中的指定元素

// 保存所有选中的id
var ids = [];$(document).on("ifChanged", ".className", function () {if($(this).is(":checked")){// 如果选中，则往数组中插入该元素对应的idids.push($(this).val());}else{// 如果是取消选中，则往数组中删除该元素对应的idids.splice($.inArray($(this).val(), ids), 1);}
});

iCheck事件与样式操作相关推荐

jQuery中事件及常用事件总结、jQuery中常见效果、隐式迭代、链式编程、样式操作、动画队列、不同元素绑定同一个事件
jQuery事件: jQuery中的事件和javascript中的事件基本相似,不同的是jQuery中的事件处理函数写在事件后面的括号中,如: <script>$('input').cli ...
vue样式操作与事件绑定
Vue笔记 1 Vue实例 (VM) var vm = new Vue({ el:'#app', //挂载元素 //数据 data: { title:'值', .... dataList:[] }, ...
JavaWeb开发前端语言：jQuery（二）属性操作、DOM的增删改、CSS样式操作、动画、事件操作
JavaWeb开发前端语言:jQuery(二) 1.jQuery的属性操作 2.jQuery练习:使用jQuery完成全选.全不选.反选和提交功能 3.DOM的增删改 3.1 DOM的增操作 3.1 ...
jQuery样式操作
1.attr()方法获取和设置元素的class 用法: 获取 $("element").attr("class"); 设置 $("element&qu ...
jQuery学习笔记系列（一）——入口函数，jQuery对象和DOM对象，jQuery选择器、样式操作、效果（显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列）
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别能够写出常用的 ...
JS-元素的样式操作-文本内容-位置
JS-元素的样式操作-文本内容-位置 1 回顾 1.1 从文档中获取元素 1. 通过 ID 名document.getElementById()2. 通过标签名document.getElements ...
jQuery（一）—— jQuery 概述 / jQuery 选择器 / jQuery 样式操作 / jQuery 效果
原以为 jQuery 不需要学习,但是接触了一些 VUE 框架,发现用到了好多 jQuery 的知识,于是返回来重新学习.本系列笔记大概分为三篇,陆续更新. 参考:W3school -- jQuery ...
17前端学习之JQuery基础(一):jQ介绍,jQ基本使用,jQ选择器,jQ样式操作,jQ动画效果
文章目录一.Jquery介绍: 1. JavaScript 库: 2 jQuery的概念 3. jQuery的优点二.jQuery 的基本使用: 1. jQuery 的下载 2. 体验jQuery ...
【08】jQuery：01-jQuery介绍、jQuery基本使用、jQuery选择器、jQuery样式操作、jQuery效果、jQuery入口函数、jQuery对象
文章目录 day01 - jQuery 1.1. jQuery 介绍 1.1.1 JavaScript 库 1.1.2 jQuery的概念 1.1.3 jQuery的优点 1.2. jQuery 的基 ...

iCheck事件与样式操作

一、iCheck绑定事件

二、 iCheck特点

三、移除数组中的指定元素

iCheck事件与样式操作相关推荐

最新文章

热门文章