ICheck表单复选框、单选框控件美化插件

作用：

• 渲染并美化当前页面的复选框或单选框
• 响应复选框或单选框的点击事件

特点：

1. 在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备
2. 支持触摸设备 — iOS、Android、BlackBerry、Windows Phone等系统
3. 方便定制 — 用HTML 和 CSS 即可为其设置样式 (多套皮肤)
4. 体积小巧 — gzip压缩后只有1 kb
5. 25 种参数 用来定制复选框（checkbox）和单选按钮（radio button）
6. 8 个回调事件 用来监听输入框的状态
7. 7个方法 用来通过编程方式控制输入框的状态
8. 能够将输入框的状态变化同步回原始输入框中， 支持所有选择器

使用方式：

• 引入css文件：<link rel="stylesheet" href="/static/assets/plugins/iCheck/all.css">
• 引入js文件：<script src="/static/assets/plugins/iCheck/icheck.min.js"></script>
• 编写html文件：<input type="checkbox" class="minimal" />
• 激活iCheck插件（即初始化iCheck样式效果等）:

$('input[type="checkbox"], input[type="radio"]').iCheck({
    checkboxClass: 'icheckbox_minimal-blue',
    radioClass   : 'iradio_minimal-blue'
});

用法：

• 基础用法：

$('input').iCheck({ 
  labelHover : false, 
  cursor : true, 
  checkboxClass : 'icheckbox_square-blue', 
  radioClass : 'iradio_square-blue', 
  increaseArea : '20%' 
}); 

• 参数列表以及默认值：

{ 
	 handle: '', 
	 checkboxClass: 'icheckbox', 
	 radioClass: 'iradio', 
	 checkedClass: 'checked', 
	 checkedCheckboxClass: '', 
	 checkedRadioClass: '', 
	 uncheckedClass: '', 
	 uncheckedCheckboxClass: '', 
	 uncheckedRadioClass: '', 
	 disabledClass: 'disabled', 
	 disabledCheckboxClass: '', 
	 disabledRadioClass: '', 
	 enabledClass: '', 
	 enabledCheckboxClass: '', 
	 enabledRadioClass: '', 
	 hoverClass: 'hover', 
	 focusClass: 'focus', 
	 activeClass: 'active', 
	 labelHover: true, 
	 labelHoverClass: 'hover', 
	 increaseArea: '', 
	 cursor: false, 
	 inheritClass: false, 
	 inheritID: false, 
	 insert: '' 
} 

常用方法：

• $('input').iCheck('check');：将输入框的状态设置为 checked
• $('input').iCheck('uncheck');：移除 checked 状态
• $('input').iCheck('disable');：将输入框的状态设置为 disabled
• $('input').iCheck('enable');：移除 disabled 状态
• $('input').iCheck('destroy');：移除 iCheck 样式
• $('input').iCheck('toggle');：若输入框状态为checked,则移除checked状态，若非checked状态则设置为checked状态（即切换选中状态）
• $('input').iCheck('update');：响应在插件外部的输入框的输入更改
  注：可以使用任何选择器

常用事件：

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

事件绑定示例：

$('input').on('ifChecked', function(event){
  alert(event.type + ' callback');
});

完整示例：

实现 全选效果：

<input type="checkbox" class="checkbox-master">
<div class="test">
	<input type="checkbox">
	<input type="checkbox">
	<input type="checkbox">
	<input type="checkbox">
	<input type="checkbox">

</div>

var _checkboxMaster = $(".checkbox-master");
var _checkbox = $("test").find("[type='checkbox']").not("[disabled]");
_checkboxMaster.on("ifClicked", function (e) {
    // 当前状态已选中，点击后应取消选择
    if(e.target.checked) {
        _checkbox.iCheck("uncheck");
    }else { // 当前状态未选中，点击后应全选
        _checkbox.iCheck("check");
    }
});

若要跳整iCheck中的radio和checkbox的大小，可进行对以下css中的类名修改：

.icheckbox_square-blue, .iradio_square-blue { 
  display: block; 
  margin: 0; 
  padding: 0; 
  width: 22px; 
  height: 22px; 
  background: url(blue.png) no-repeat; 
  border: none; 
  cursor: pointer; 
}