jQuery iCheck自定義複選框和單選按鈕組件

參數：

下面是參數列表及其默認值：

{
  // 'checkbox' or 'radio' to style only checkboxes or radio buttons, both by default
  handle: '',

  // base class added to customized checkboxes
  checkboxClass: 'icheckbox',

  // base class added to customized radio buttons
  radioClass: 'iradio',

  // class added on checked state (input.checked = true)
  checkedClass: 'checked',

    // if not empty, used instead of 'checkedClass' option (input type specific)
    checkedCheckboxClass: '',
    checkedRadioClass: '',

  // if not empty, added as class name on unchecked state (input.checked = false)
  uncheckedClass: '',

    // if not empty, used instead of 'uncheckedClass' option (input type specific)
    uncheckedCheckboxClass: '',
    uncheckedRadioClass: '',

  // class added on disabled state (input.disabled = true)
  disabledClass: 'disabled',

    // if not empty, used instead of 'disabledClass' option (input type specific)
    disabledCheckboxClass: '',
    disabledRadioClass: '',

  // if not empty, added as class name on enabled state (input.disabled = false)
  enabledClass: '',

    // if not empty, used instead of 'enabledClass' option (input type specific)
    enabledCheckboxClass: '',
    enabledRadioClass: '',

  // class added on hover state (pointer is moved onto an input)
  hoverClass: 'hover',

  // class added on focus state (input has gained focus)
  focusClass: 'focus',

  // class added on active state (mouse button is pressed on an input)
  activeClass: 'active',

  // adds hoverClass to customized input on label hover and labelHoverClass to label on input hover
  labelHover: true,

    // class added to label if labelHover set to true
    labelHoverClass: 'hover',

  // increase clickable area by given % (negative number to decrease)
  increaseArea: '',

  // true to set 'pointer' CSS cursor over enabled inputs and 'default' over disabled
  cursor: false,

  // set true to inherit original input's class name
  inheritClass: false,

  // if set to true, input's id is prefixed with 'iCheck-' and attached
  inheritID: false,

  // add HTML code or text inside customized input
  insert: ''
}

用法：

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

移動端引入：

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

javascript：

<script>

$(document).ready(function(){

 $('input').iCheck({

   checkboxClass: 'icheckbox_square-blue',  // 注意square和blue的對應關係

   radioClass: 'iradio_square-blue',

   increaseArea: '20%' // optional

 });

});

</script>

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