jquery 选择框icheck 插件的使用
icheck使用方法
1、选择你要使用的皮肤样式主题，共6个
flat, futurico, line, minimal, polaris, square
每个皮肤底下有好几个可以选择的颜色，例如：
Black — square.css
Red — red.css
Green — green.css
Blue — blue.css
Aero — aero.css
Grey — grey.css
Orange — orange.css
Yellow — yellow.css
Pink — pink.css
Purple — purple.css
2 、例如选择square皮肤下的blue.css,复制 skin/square文件夹下的到css文件夹下
<link href="css/square/blue.css" rel="stylesheet">
3 、引入icheck.js
首先引入jQuery v1.7+ (或 Zepto)，然后再引入icheck插件
移动端引入：
<script src="js/zepto.js"></script>
<script src="js/icheck.min.js"></script>
PC端引入
<script src="js/jquery.js"></script>
<script src="js/icheck.min.js"></script>
4、 在页面添加以下代码
html
<input type="checkbox">
<input type="checkbox" checked>
<input type="radio" name="iCheck">
<input type="radio" name="iCheck" checked>
js
$(document).ready(function(){
//渲染样式
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue', // 注意square和blue的对应关系
radioClass: 'iradio_square-blue',
increaseArea: '20%' // optional
});
// 使用on()方法绑定事件：
$('input').on('ifChecked', function(event){
console.log(event.type);
});
$('input').on('ifCreated ifClicked ifChanged ifChecked ifUnchecked ifDisabled ifEnabled ifDestroyed', function(event){
console.log(event.type);
});
});
icheck的回调事件
| 事件名称 | 使用时机 |
|---|---|
| ifClicked | 用户点击了自定义的输入框或与其相关联的label |
| ifChanged | 输入框的 checked 或 disabled 状态改变了 |
| ifChecked | 输入框的状态变为 checked |
| ifUnchecked | checked 状态被移除 |
| ifDisabled | 输入框状态变为 disabled |
| ifEnabled | disabled 状态被移除 |
| ifCreated | 输入框被应用了iCheck样式 |
| ifDestroyed | iCheck样式被移除 |
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样式