iCheck 表单复选框、单选框控件美化插件,主要作用为:
- 渲染并美化当前页面的复选框或单选框
- 响应复选框或单选框的点击事件
官网:http://www.bootcss.com/p/icheck/ 官网讲解的更仔细,插件可以在里面下载。
进入正题:
页面引用
CSS部分
<%--Icheck--%>
<link href="/static/assets/global/plugins/icheck/skins/all.css" rel="stylesheet" type="text/css" />
JS部分
<%--Icheck--%>
<script src="/static/assets/global/plugins/icheck/icheck.min.js" type="text/javascript"></script>
激活ICheck
默认情况下 iCheck 是不生效的,需要使用 JS 代码激活,此过程可以指定 iCheck 的皮肤,案例代码如下:
CSS部分
<input type="checkbox" class="minimal checkbox-master"/>
<input type="checkbox" class="minimal checkbox-son"/>
JS部分
/*激活ICheck*/
var handlerInitIcheckBox = function () {
$('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
checkboxClass: 'icheckbox_minimal-blue',
radioClass: 'iradio_minimal-blue'
});
};
回调函数
iCheck 提供了大量回调事件,都可以用来监听 change 事件
事件名称 | 使用时机 |
---|---|
ifClicked | 用户点击了自定义的输入框或与其相关联的 label |
ifChanged | 输入框的 checked 或 disabled 状态改变了 |
ifChecked | 输入框的状态变为 checked |
ifUnchecked | checked 状态被移除 |
ifDisabled | 输入框状态变为 disabled |
ifEnabled | disabled 状态被移除 |
ifCreated | 输入框被应用了 iCheck 样式 |
ifDestroyed | iCheck 样式被移除 |
方法
下面这些方法可以用来通过编程方式改变输入框状态(可以使用任何选择器):
-
$('input').iCheck('check');
:将输入框的状态设置为checked
-
$('input').iCheck('uncheck');
:移除checked
状态 -
$('input').iCheck('toggle');
: -
$('input').iCheck('disable');
:将输入框的状态设置为disabled
-
$('input').iCheck('enable');
:移除disabled
状态 -
$('input').iCheck('update');
: -
$('input').iCheck('destroy');
:移除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();
});