iCheck plugin works with checkboxes and radio buttons like a constructor.

It wraps each input with a div, which may be customized by you or using one of the available skins.

You may also place inside that div some HTML code or text using insert option.

For this 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]">

With default options you'll get nearly this:

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

By default, iCheck doesn't provide any CSS styles for wrapper divs (if you don't use skins).

Options

These options are default:

{ handle: '', checkboxClass: 'icheckbox', radioClass: 'iradio', checkedClass: 'checked', checkedCheckboxClass: '', checkedRadioClass: '', uncheckedClass: '', uncheckedCheckboxClass: '', uncheckedRadioClass: '', disabledClass: 'disabled', disabledCheckboxClass: '', disabledRadioClass: '', enabledClass: '', enabledCheckboxClass: '', enabledRadioClass: '', indeterminateClass: 'indeterminate', indeterminateCheckboxClass: '', indeterminateRadioClass: '', determinateClass: '', determinateCheckboxClass: '', determinateRadioClass: '', hoverClass: 'hover', focusClass: 'focus', activeClass: 'active', labelHover: true, labelHoverClass: 'hover', increaseArea: '', cursor: false, inheritClass: false, inheritID: false, aria: false, insert: '' }

There's no need to copy and paste all of them, you can just mention the ones you need:

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

You can choose any class names and slyle them as you want.

Initialize

Just include icheck.js after jQuery v1.7+ (or Zepto [polyfill, event, data]).

iCheck supports any selectors, but handles only checkboxes and radio buttons:

$('input').iCheck(); $('.block input').iCheck(); $('.test input').iCheck({ handle: 'checkbox' }); $('.vote').iCheck(); $('input.some').iCheck({ });

Indeterminate

HTML5 allows specifying indeterminate ("partially" checked) state for checkboxes. iCheck supports it for both checkboxes and radio buttons.

You can make an input indeterminate through HTML using additional attributes (supported by iCheck). Both do the same job, but indeterminate="true" may not work in some browsers (like IE7):

<input type="checkbox" indeterminate="true"> <input type="radio" indeterminate="true"> <input type="checkbox" determinate="false"> <input type="radio" determinate="false">

indeterminate and determinate methods can be used to toggle indeterminate state.

Callbacks

iCheck provides plenty callbacks, which may be used to handle changes.

Callback name When used ifClicked user clicked on a customized input or an assigned label ifChanged input's checked , disabled or indeterminate state is changed ifChecked input's state is changed to checked ifUnchecked checked state is removed ifToggled input's checked state is changed ifDisabled input's state is changed to disabled ifEnabled disabled state is removed ifIndeterminate input's state is changed to indeterminate ifDeterminate indeterminate state is removed ifCreated input is just customized ifDestroyed customization is just removed

Use on() method to bind them to inputs:

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

ifCreated callback should be binded before plugin init.

Methods

These methods can be used to make changes programmatically (any selectors can be used):

$('input').iCheck('check'); — change input's state to checked

$('input').iCheck('uncheck'); — remove checked state

$('input').iCheck('toggle'); — toggle checked state

$('input').iCheck('disable'); — change input's state to disabled

$('input').iCheck('enable'); — remove disabled state

$('input').iCheck('indeterminate'); — change input's state to indeterminate

$('input').iCheck('determinate'); — remove indeterminate state

$('input').iCheck('update'); — apply input changes, which were done outside the plugin

$('input').iCheck('destroy'); — remove all traces of iCheck

You may also specify some function, that will be executed on each method call:

$('input').iCheck('check', function(){ alert('Well done, Sir'); });

Feel free to fork and submit pull-request or submit an issue if you find something not working.