super customized checkboxes and radio buttons with jQuery & Zepto

iCheck

@Damir Foy

插件特色

案例

将 1 和 3 输入框置为 checked 状态 展示代码 
$('#input-1, #input-3').iCheck('check');
移除 1 和 3 输入框置的 checked 状态 展示代码 
$('#input-1, #input-3').iCheck('uncheck');
将 2 和 4 输入框置为 disabled状态 展示代码 
$('#input-2, #input-4').iCheck('disable');
移除 2 和 4 输入框置为disabled状态 展示代码 
$('#input-2, #input-4').iCheck('enable');
移除iCheck样式 展示代码 
$('input').iCheck('destroy');

Callbacks

    皮肤

    最简皮肤

    Live

    Color schemes

    States

    • Normal
    • Hover
    • Checked
    • Disabled
    • Disabled & checked
    Demo

    For Zepto library, instead of jquery.icheck.js use zepto.icheck.js.

    If you need a minified version, use jquery.icheck.min.js or zepto.icheck.min.js.

    1. Choose a color scheme, there are 10 different styles available:
      • Black — minimal.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. Copy /skins/minimal/ folder and jquery.icheck.js file to your site.

    3. Insert before </head> in your HTML (replace your-path and color-scheme):

      <link href="your-path/minimal/color-scheme.css" rel="stylesheet">
<script src="your-path/jquery.icheck.js"></script>

      Example for a Red color scheme:

      <link href="your-path/minimal/red.css" rel="stylesheet">
<script src="your-path/jquery.icheck.js"></script>

    4. Add some checkboxes and radio buttons to your HTML:

      <input type="checkbox">
<input type="checkbox" checked>
<input type="radio" name="iCheck">
<input type="radio" name="iCheck" checked>

    5. Add JavaScript to your HTML to launch iCheck plugin:

      <script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_minimal',
    radioClass: 'iradio_minimal',
    increaseArea: '20%' // optional
  });
});
</script>

      For different from black color schemes use this code (example for Red):

      <script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_minimal-red',
    radioClass: 'iradio_minimal-red',
    increaseArea: '20%' // optional
  });
});
</script>
    6. Done.
    使用说明

    Square皮肤

    Live

    Color schemes

    States

    • Normal
    • Hover
    • Checked
    • Disabled
    • Disabled & checked
    案例

    For Zepto library, instead of jquery.icheck.js use zepto.icheck.js.

    If you need a minified version, use jquery.icheck.min.js or zepto.icheck.min.js.

    1. Choose a color scheme, there are 10 different styles available:
      • 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. Copy /skins/square/ folder and jquery.icheck.js file to your site.

    3. Insert before </head> in your HTML (replace your-path and color-scheme):

      <link href="your-path/square/color-scheme.css" rel="stylesheet">
<script src="your-path/jquery.icheck.js"></script>

      Example for a Red color scheme:

      <link href="your-path/square/red.css" rel="stylesheet">
<script src="your-path/jquery.icheck.js"></script>

    4. Add some checkboxes and radio buttons to your HTML:

      <input type="checkbox">
<input type="checkbox" checked>
<input type="radio" name="iCheck">
<input type="radio" name="iCheck" checked>

    5. Add JavaScript to your HTML to launch iCheck plugin:

      <script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_square',
    radioClass: 'iradio_square',
    increaseArea: '20%' // optional
  });
});
</script>

      For different from black color schemes use this code (example for Red):

      <script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_square-red',
    radioClass: 'iradio_square-red',
    increaseArea: '20%' // optional
  });
});
</script>
    6. Done.
    使用说明

    Flat皮肤

    Live

    Color schemes

    States

    • Normal
    • Checked
    • Disabled
    • Disabled & checked
    案例

    For Zepto library, instead of jquery.icheck.js use zepto.icheck.js.

    If you need a minified version, use jquery.icheck.min.js or zepto.icheck.min.js.

    1. Choose a color scheme, there are 10 different styles available:
      • 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. Copy /skins/flat/ folder and jquery.icheck.js file to your site.

    3. Insert before </head> in your HTML (replace your-path and color-scheme):

      <link href="your-path/flat/color-scheme.css" rel="stylesheet">
<script src="your-path/jquery.icheck.js"></script>

      Example for a Red color scheme:

      <link href="your-path/flat/red.css" rel="stylesheet">
<script src="your-path/jquery.icheck.js"></script>

    4. Add some checkboxes and radio buttons to your HTML:

      <input type="checkbox">
<input type="checkbox" checked>
<input type="radio" name="iCheck">
<input type="radio" name="iCheck" checked>

    5. Add JavaScript to your HTML to launch iCheck plugin:

      <script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_flat',
    radioClass: 'iradio_flat'
  });
});
</script>

      For different from black color schemes use this code (example for Red):

      <script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_flat-red',
    radioClass: 'iradio_flat-red'
  });
});
</script>
    6. Done.
    使用说明

    Line皮肤

    Live

    Color schemes

    States

    • Normal
    • Hover
    • Checked
    • Disabled
    • Disabled & checked
    案例

    For Zepto library, instead of jquery.icheck.js use zepto.icheck.js.

    If you need a minified version, use jquery.icheck.min.js or zepto.icheck.min.js.

    1. Choose a color scheme, there are 10 different styles available:
      • Black — line.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. Copy /skins/line/ folder and jquery.icheck.js file to your site.

    3. Insert before </head> in your HTML (replace your-path and color-scheme):

      <link href="your-path/line/color-scheme.css" rel="stylesheet">
<script src="your-path/jquery.icheck.js"></script>

      Example for a Red color scheme:

      <link href="your-path/line/red.css" rel="stylesheet">
<script src="your-path/jquery.icheck.js"></script>

    4. Add some checkboxes, radio buttons and labels to your HTML:

      <input type="checkbox">
<label>Checkbox 1</label>

<input type="checkbox" checked>
<label>Checkbox 2</label>

<input type="radio" name="iCheck">
<label>Radio button 1</label>

<input type="radio" name="iCheck" checked>
<label>Radio button 2</label>

    5. Add JavaScript to your HTML to launch iCheck plugin:

      <script>
$(document).ready(function(){
  $('input').each(function(){
    var self = $(this),
      label = self.next(),
      label_text = label.text();

    label.remove();
    self.iCheck({
      checkboxClass: 'icheckbox_line',
      radioClass: 'iradio_line',
      insert: '<div class="icheck_line-icon"></div>' + label_text
    });
  });
});
</script>

      For different from black color schemes use this code (example for Red):

      <script>
$(document).ready(function(){
  $('input').each(function(){
    var self = $(this),
      label = self.next(),
      label_text = label.text();

    label.remove();
    self.iCheck({
      checkboxClass: 'icheckbox_line-red',
      radioClass: 'iradio_line-red',
      insert: '<div class="icheck_line-icon"></div>' + label_text
    });
  });
});
</script>
    6. Done.
    使用说明

    Polaris skin

    Live

    States

    • Normal
    • Hover
    • Checked
    • Disabled
    • Disabled & checked
    案例

    For Zepto library, instead of jquery.icheck.js use zepto.icheck.js.

    If you need a minified version, use jquery.icheck.min.js or zepto.icheck.min.js.

    1. Copy /skins/polaris/ folder and jquery.icheck.js file to your site.

    2. Insert before </head> in your HTML (replace your-path and color-scheme):

      <link href="your-path/polaris/polaris.css" rel="stylesheet">
<script src="your-path/jquery.icheck.js"></script>

    3. Add some checkboxes and radio buttons to your HTML:

      <input type="checkbox">
<input type="checkbox" checked>
<input type="radio" name="iCheck">
<input type="radio" name="iCheck" checked>

    4. Add JavaScript to your HTML to launch iCheck plugin:

      <script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_polaris',
    radioClass: 'iradio_polaris',
    increaseArea: '-10' // optional
  });
});
</script>
    5. Done.
    使用说明

    Futurico skin

    Live

    States

    • Normal
    • Checked
    • Disabled
    • Disabled & checked
    案例

    For Zepto library, instead of jquery.icheck.js use zepto.icheck.js.

    If you need a minified version, use jquery.icheck.min.js or zepto.icheck.min.js.

    1. Copy /skins/futurico/ folder and jquery.icheck.js file to your site.

    2. Insert before </head> in your HTML (replace your-path and color-scheme):

      <link href="your-path/futurico/futurico.css" rel="stylesheet">
<script src="your-path/jquery.icheck.js"></script>

    3. Add some checkboxes and radio buttons to your HTML:

      <input type="checkbox">
<input type="checkbox" checked>
<input type="radio" name="iCheck">
<input type="radio" name="iCheck" checked>

    4. Add JavaScript to your HTML to launch iCheck plugin:

      <script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_futurico',
    radioClass: 'iradio_futurico',
    increaseArea: '20%' // optional
  });
});
</script>
    5. Done.
    使用说明

    所有皮肤（除了Line）都是支持透明的，你可以将它们应用在任何背景上。

    Square、Flat、Polaris 和 Futurico 皮肤参考了Designmodo's UI packs。

    最简单的使用指南

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

    对比

    iCheck被创造出来是为了避免重复造车轮。它针对大量浏览器、设备和使用者提供了同样的表现方式。回调事件和方法可以被用来很容易的处理自定义的输入框的状态的变化。

    还有一些利用 CSS3 技术给复选框和单选按钮设置样式的途径。例如。下面列出了此类方法的限制和不足：

    • — inputs are keyboard inaccessible, since display: none or visibility: hidden used to hide them
    • — poor browser support
    • — multiple bugs on mobile devices
    • — tricky, harder to maintain CSS code
    • — JavaScript is still needed to fix specific issues

    While CSS3 method is quite limited solution, iCheck is made to be an everyday replacement covering most of the tasks.

    浏览器支持

    iCheck已经在 Internet Explorer 6+、Firefox 2+、Opera 9+、Google Chrome 和 Safari 浏览器上被验证过，并且应该可以再更多浏览器上工作。

    移动浏览器(例如 Opera mini、 Chrome mobile、 Safari mobile 和其它浏览器) 也被支持。已经在 iOS (iPad、 iPhone、 iPod)、Android、BlackBerry 和 Windows Phone 设备上进行了测试。

    下载插件
    iCheck plugin is released under the MIT License. Feel free to use it in personal and commercial projects.
    Created by Damir Foy
    Fork me on GitHub