一、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")){
// 如果选中,则往数组中插入该元素对应的id
ids.push($(this).val());
}else{
// 如果是取消选中,则往数组中删除该元素对应的id
ids.splice($.inArray($(this).val(), ids), 1);
}
});