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; 
}