$('#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');
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 skin:
<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"> <input type="radio" 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>
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 skin:
<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"> <input type="radio" 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>
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 skin:
<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"> <input type="radio" 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>
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 skin:
<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"> <label>Radio button 1</label> <input type="radio" 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: 'icheck_line',
radioClass: 'icheck_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: 'icheck_line-red',
radioClass: 'icheck_line-red',
insert: '<div class="icheck_line-icon"></div>' + label_text
});
});
});
</script>
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"> <input type="radio" 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>
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"> <input type="radio" 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>
All skins (except Line) are transparent, you may use them on any background.
Everything is included into download package.
iCheck plugin works with checkboxes and radio buttons like a constructor.
It wraps each input with a div, which you may customize yourself or use one of the available skins.
You may also place inside that div some HTML code or text using insert option.
For this HTML:
<input type="checkbox" checked> <input type="radio" name="some" checked> <input type="radio" name="some">
With default options you'll get nearly this:
<div class="icheckbox"> <input type="checkbox" checked> </div> <div class="iradio"> <input type="radio" name="some" checked> </div> <div class="iradio"> <input type="radio" name="some"> </div>
By default, iCheck doesn't provide any CSS styles for wrapper divs (if you don't use skins).
These options are default:
{
// 'checkbox' or 'radio' to style only checkboxes or radio buttons, both by default
handle: '',
// class added to customized checkboxes
checkboxClass: 'icheckbox',
// class added to customized radio buttons
radioClass: 'iradio',
// class on checked state
checkedClass: 'checked',
// class on disabled state
disabledClass: 'disabled',
// class on hover state
hoverClass: 'hover',
// class on focus state
focusClass: 'focus',
// class on active state
activeClass: 'active',
// add 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 to decrease)
increaseArea: '',
// true to set hand cursor over input
cursor: false,
// set true to inherit input's class name
inheritClass: false,
// if set to true, input's id prefixed with "icheck-" and attached
inheritID: false,
// add HTML code or text inside customized input
insert: ''
}
You can choose any class names and slyle them as you want.
iCheck supports any selectors, but handles only checkboxes and radio buttons:
// 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 });
jQuery v1.6 or newer and jquery.icheck.js (jquery.icheck.min.js is minified) should be included in your HTML.
| Callback name | When used |
|---|---|
| is.Clicked | user clicked on customized input or label |
| is.Changed | input's checked or disabled state is changed |
| is.Checked | input's state is changed to checked |
| is.Unchecked | checked state is removed |
| is.Disabled | input's state is changed to disabled |
| is.Enabled | disabled state is removed |
| is.Created | input is just customized |
| is.Destroyed | customization is just removed |
Use bind to attach them:
$('input').bind('is.Clicked', function(){
console.log('input is clicked');
});
is.Created callback should be binded before plugin init.
$('input').iCheck('check'); — change input's state to checked
$('input').iCheck('uncheck'); — remove checked state
$('input').iCheck('disable'); — change input's state to disabled
$('input').iCheck('enable'); — remove disabled state
$('input').iCheck('update'); — apply input changes, which were done outside the plugin
$('input').iCheck('destroy'); — remove all traces of iCheck
iCheck is created to avoid routine of reinventing the wheel when working with checkboxes and radio buttons. It provides an expected identical result for the huge number of browsers, devices and their versions. Callbacks and methods can be used to easily handle and make changes at customized inputs.
There are some CSS3 ways available to style checkboxes and radio buttons, like this one. You have to know about some disadvantages of similar methods:
While CSS3 method is quite limited solution, iCheck is made to be an everyday replacement covering most of the tasks.
iCheck is verified to work in Internet Explorer 7+ (works in IE6 if you don't use CSS class chaining), Firefox 2+, Google Chrome, Safari 3+ and Opera 9+ browsers. Should also work in many others.
Mobile browsers (like Opera mini, Chrome mobile, Safari mobile and others) are also supported. Tested on iOS, Android, BlackBerry and Windows Phone devices.