用iCheck(jQuery 和 Zepto) 插件定制复选框（checkboxes）和 单选按钮（radio buttons）
在不同浏览器和设备上都有相同的表现 & 包括 桌面和移动设备
支持触摸设备 & iOS、Android、BlackBerry、Windows Phone
支持键盘导航 & Tab、Spacebar、Arrow up/down 和其它快捷键
方便定制 & 用HTML 和 CSS 即可为其设置样式 (试试 6 套针对Retina屏幕的皮肤吧)
支持 jQuery 和 Zepto JavaScript工具库
体积小巧 & gzip压缩后只有1 kb
25 种参数 用来定制复选框（checkbox）和单选按钮（radio button）
8 个回调事件 用来***输入框的状态
7 个方法 用来通过编程方式控制输入框的状态
能够将输入框的状态变化同步回原始输入框中， 支持所有选择器
Checkbox, #input-1
Checkbox, #input-2
Radio button, #input-3
Radio button, #input-4
将 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');
Checkbox 1
Checkbox 2
Disabled & checked
Radio button 1
Radio button 2
Disabled & checked
Color schemes
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.
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
Copy /skins/minimal/ folder and jquery.icheck.js
file to your site.
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>
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>
Add JavaScript to your HTML to launch iCheck plugin:
$(document).ready(function(){
$('input').iCheck({
checkboxClass: 'icheckbox_minimal',
radioClass: 'iradio_minimal',
increaseArea: '20%'
For different from black color schemes use this code (example for Red):
$(document).ready(function(){
$('input').iCheck({
checkboxClass: 'icheckbox_minimal-red',
radioClass: 'iradio_minimal-red',
increaseArea: '20%'
Square皮肤
Checkbox 1
Checkbox 2
Disabled & checked
Radio button 1
Radio button 2
Disabled & checked
Color schemes
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.
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
Copy /skins/square/ folder and jquery.icheck.js file to your site.
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>
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>
Add JavaScript to your HTML to launch iCheck plugin:
$(document).ready(function(){
$('input').iCheck({
checkboxClass: 'icheckbox_square',
radioClass: 'iradio_square',
increaseArea: '20%'
For different from black color schemes use this code (example for Red):
$(document).ready(function(){
$('input').iCheck({
checkboxClass: 'icheckbox_square-red',
radioClass: 'iradio_square-red',
increaseArea: '20%'
Checkbox 1
Checkbox 2
Disabled & checked
Radio button 1
Radio button 2
Disabled & checked
Color schemes
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.
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
Copy /skins/flat/ folder and jquery.icheck.js file to your site.
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>
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>
Add JavaScript to your HTML to launch iCheck plugin:
$(document).ready(function(){
$('input').iCheck({
checkboxClass: 'icheckbox_flat',
radioClass: 'iradio_flat'
For different from black color schemes use this code (example for Red):
$(document).ready(function(){
$('input').iCheck({
checkboxClass: 'icheckbox_flat-red',
radioClass: 'iradio_flat-red'
Checkbox 1
Checkbox 2
Disabled & checked
Radio button 1
Radio button 2
Disabled & checked
Color schemes
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.
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
Copy /skins/line/ folder and jquery.icheck.js file to your site.
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>
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>
Add JavaScript to your HTML to launch iCheck plugin:
$(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
For different from black color schemes use this code (example for Red):
$(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
Polaris skin
Checkbox 1
Checkbox 2
Disabled & checked
Radio button 1
Radio button 2
Disabled & checked
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.
Copy /skins/polaris/ folder and jquery.icheck.js file to your site.
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>
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>
Add JavaScript to your HTML to launch iCheck plugin:
$(document).ready(function(){
$('input').iCheck({
checkboxClass: 'icheckbox_polaris',
radioClass: 'iradio_polaris',
increaseArea: '-10'
Futurico skin
Checkbox 1
Checkbox 2
Disabled & checked
Radio button 1
Radio button 2
Disabled & checked
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.
Copy /skins/futurico/ folder and jquery.icheck.js file to your site.
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>
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>
Add JavaScript to your HTML to launch iCheck plugin:
$(document).ready(function(){
$('input').iCheck({
checkboxClass: 'icheckbox_futurico',
radioClass: 'iradio_futurico',
increaseArea: '20%'
最简单的使用指南
iCheck插件就像是复选框和单选按钮的构造器。
它将每个输入框都用一个div包裹起来，这样，你就可以按自己的需要定制样式或者使用自带的皮肤了。
你还可以通过insert参数向这个div中放置HTML代码或文本。
对于下面这段HTML代码：
&input type="checkbox" name="quux[1]" disabled>
&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时会得到如下结果：
&div class="icheckbox disabled">&input type="checkbox" name="quux[1]" disabled>&/div>
&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样式（在你不使用皮肤的时）。
下面是参数列表及其默认值：
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时，只需要将修改了默认值的参数列出来即可：
$('input').iCheck({
labelHover: false,
cursor: true
你可以对上面列出的任何class重置样式。
首先引入 (或 )，然后引入jquery.icheck.js (或者zepto.icheck.js) 。
iCheck支持所有选择器（selectors），并且只针对复选框和单选按钮起作用：
$('input').iCheck();
$('.block input').iCheck();
$('.test input').iCheck({
handle: 'checkbox'
$('.vote').iCheck();
$('input.some').iCheck({
用户点击了自定义的输入框或与其相关联的label
输入框的 checked 或 disabled 状态改变了
输入框的状态变为 checked
ifUnchecked
checked 状态被移除
ifDisabled
输入框状态变为 disabled
disabled 状态被移除
输入框被应用了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 . Feel free to use it in personal and commercial projects.