JQuery的 iCheck 單選、複選美化插件使用

表單複選框、單選框控件美化插件，主要作用為：

• 渲染并美化目前頁面的複選框或單選框
• 響應複選框或單選框的點選事件
• 25 種參數 用來定制複選框（checkbox）和單選按鈕（radio button）
• 8 個回調事件 用來監聽輸入框的狀态
• 7個方法 用來通過程式設計方式控制輸入框的狀态

官網網址：

• iCheck
• iCheck GitHub
• iCheck jquery

1.頁面引用及iCheck激活

頁面引入：

<!-- iCheck for checkboxs and radio inputs-->
<link rel="stylesheet" href="/static/assets/plugins/iCheck/all.css">
<!--iCheck 1.0.1-->
<script src ="/static/assets/plugins/iCheck/icheck.min.js"></script>
           

激活：預設情況下iCheck是不生效的,需要使用JS代碼激活,此過程中可以指定iCheck的皮膚,案例代碼如下:

<input type="checkbox" class="minimal" />
// 激活 iCheck
$('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
    checkboxClass: 'icheckbox_minimal-blue',
    radioClass   : 'iradio_minimal-blue'
});
           

2.iCheck的25種參數使用

調用iCheck時，隻需要将修改了預設值的參數列出來即可：

//基礎使用方法 
$('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: '' 
} 
           

iCheck皮膚：

Black — minimal.css //黑色

Red — red.css //紅色

Green — green.css //綠色

Blue — blue.css //藍色

Aero — aero.css //win7中的那種玻璃效果

Grey — grey.css //銀灰色

Orange — orange.css //橙色

Yellow — yellow.css //黃色

Pink — pink.css //粉紅色

Purple — purple.css //紫色

3.iCheck的7個使用方法

$('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樣式 
           

4.iCheck的8個回調事件

iCheck支援所有選擇器（selectors），并且隻針對複選框checkbox和單選radio按鈕起作用。

iCheck提供了大量回調事件，都可以用來監聽change事件。

ifClicked	 使用者點選了自定義的輸入框或與其相關聯的label
 ifChanged	 輸入框的 checked 或 disabled 狀态改變了
 ifChecked	 輸入框的狀态變為 checked
 ifUnchecked	 checked 狀态被移除
 ifDisabled	 輸入框狀态變為 disabled
 ifEnabled	 disabled 狀态被移除
 ifCreated	 輸入框被應用了iCheck樣式
 ifDestroyed	 iCheck樣式被移除
           

使用on()方法綁定事件：

//全選擷取數值
var checkAll = $("input[name='all']");
var checkboxes = $("input[name='check']");
checkAll.on('ifChecked ifUnchecked', function(event) {
    if (event.type == 'ifChecked') {
        checkboxes.iCheck('check');
    } else {
        checkboxes.iCheck('uncheck');
    }
});
checkboxes.on('ifChanged', function(event) {
    if (checkboxes.filter(':checked').length == checkboxes.length) {
        checkAll.prop('checked', 'checked');
    } else {
        checkAll.removeProp('checked');
    }
    checkAll.iCheck('update');
});

$("#cardCheck").on('ifChanged', function(event) {
   // if ($(this).prop('checked'))
    // if(this.checked)
    // if ($(this).is(':checked'))
    /*if($(this).is(":checked")) {
        alert();
    }*/
    getSmokeListDynamic();  // 重新整理表格資料
});

_checkbox.each(function () {
   // 判斷是否選中
  var delFlag = $(this).is(":checked");
  if (delFlag) {
      _idArray.push($(this).attr("id"));
  }
});

// 擷取已選值
$("input[name='id']:checkbox").each(function(){
   if(true == $(this).is(':checked')){
       str+=$(this).val()+",";
   }
});

// 判斷已選中的個數/長度
var len = $("input[name='id']:checkbox").length;
           

如果要調整icheck的radio或checkbox樣式，通過下面的css修改width和height，同時修改blue.png圖檔對應的尺寸。

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

參考連結

• JQuery的iCheck插件使用方法
• iCheck表單美化插件使用方法詳解（含參數、事件等）