super customized checkboxes and radio buttons for jQuery & Zepto

iCheck插件就像是复选框和单选按钮的构造器。
它将每个输入框都用一个div包裹起来，这样，你就可以按自己的需要定制样式或者使用自带的皮肤了。
你还可以通过insert参数向这个div中放置HTML代码或文本。

对于下面这段HTML代码：

<label>
  <input type="checkbox" name="quux[1]" disabled>
  Foo
</label>

<label for="baz[1]">Bar</label>
<input type="radio" name="quux[2]" id="baz[1]" checked>

<label for="baz[2]">Bar</label>
<input type="radio" name="quux[2]" id="baz[2]">

在默认参数下使用iCheck时会得到如下结果：

<label>
  <div class="icheckbox disabled"><input type="checkbox" name="quux[1]" disabled></div>
  Foo
</label>

<label for="baz[1]">Bar</label>
<div class="iradio checked"><input type="radio" name="quux[2]" id="baz[1]" checked></div>

<label for="baz[2]">Bar</label>
<div class="iradio"><input type="radio" name="quux[2]" id="baz[2]"></div>

默认情况下，iCheck并不会给输入框外面包裹的div设置任何CSS样式（在你不使用皮肤的时）。

参数

下面是参数列表及其默认值：

{
  // '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: ''
}

调用iCheck时，只需要将修改了默认值的参数列出来即可：

$('input').iCheck({
  labelHover: false,
  cursor: true
});

你可以对上面列出的任何class重置样式。

初始化

首先引入jQuery v1.7+ (或 Zepto)，然后引入jquery.icheck.js (或者zepto.icheck.js) 。

iCheck支持所有选择器（selectors），并且只针对复选框和单选按钮起作用：

// customize all inputs (will search for checkboxes and radio buttons)
$('input').iCheck();

// handle inputs only inside $('.block')
$('.block input').iCheck();

// handle only checkboxes inside $('.test')
$('.test input').iCheck({
  handle: 'checkbox'
});

// handle .vote class elements (will search inside the element, if it's not an input)
$('.vote').iCheck();

// you can also change options after inputs are customized
$('input.some').iCheck({
  // different options
});

回调事件

iCheck提供了大量回调事件，都可以用来监听change事件。

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

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

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

ifCreated 事件应该在插件初始化之前绑定。

方法

下面这些方法可以用来通过编程方式改变输入框状态（可以使用任何选择器）：

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