$('#input-1, #input-3').iCheck('check');
$('#input-1, #input-3').iCheck('uncheck');
$('#input-2, #input-4').iCheck('disable');
$('#input-2, #input-4').iCheck('enable');
$('input').iCheck('destroy');
Make sure jQuery v1.7+ (or Zepto [polyfill, event, data]) is loaded before the icheck.js.
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/icheck.js"></script>
Example for a Red color scheme:
<link href="your-path/minimal/red.css" rel="stylesheet"> <script src="your-path/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:
<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>
Make sure jQuery v1.7+ (or Zepto [polyfill, event, data]) is loaded before the icheck.js.
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/icheck.js"></script>
Example for a Red color scheme:
<link href="your-path/square/red.css" rel="stylesheet"> <script src="your-path/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:
<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>
Make sure jQuery v1.7+ (or Zepto [polyfill, event, data]) is loaded before the icheck.js.
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/icheck.js"></script>
Example for a Red color scheme:
<link href="your-path/flat/red.css" rel="stylesheet"> <script src="your-path/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:
<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>
Make sure jQuery v1.7+ (or Zepto [polyfill, event, data]) is loaded before the icheck.js.
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/icheck.js"></script>
Example for a Red color scheme:
<link href="your-path/line/red.css" rel="stylesheet"> <script src="your-path/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:
<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>
Make sure jQuery v1.7+ (or Zepto [polyfill, event, data]) is loaded before the icheck.js.
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/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:
<script>
$(document).ready(function(){
$('input').iCheck({
checkboxClass: 'icheckbox_polaris',
radioClass: 'iradio_polaris',
increaseArea: '-10%' // optional
});
});
</script>
Make sure jQuery v1.7+ (or Zepto [polyfill, event, data]) is loaded before the icheck.js.
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/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:
<script>
$(document).ready(function(){
$('input').iCheck({
checkboxClass: 'icheckbox_futurico',
radioClass: 'iradio_futurico',
increaseArea: '20%' // optional
});
});
</script>
所有皮肤（除了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 技术给复选框和单选按钮设置样式的途径。例如。下面列出了此类方法的限制和不足：
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 设备上进行了测试。