Refer to the iCheck website for examples.
Note: iCheck v2.0 is on the way, it got a huge performance boost, many new options and methods. It's in a release candidate state, so you may try to use it. Feel free to submit an issue if you find something not working.
Tab, Spacebar, Arrow up/down and other shortcutsiCheck 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).
These options are default:
{
// '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 indeterminate state (input.indeterminate = true)
indeterminateClass: 'indeterminate',
// if not empty, used instead of 'indeterminateClass' option (input type specific)
indeterminateCheckboxClass: '',
indeterminateRadioClass: '',
// if not empty, added as class name on determinate state (input.indeterminate = false)
determinateClass: '',
// if not empty, used instead of 'determinateClass' option (input type specific)
determinateCheckboxClass: '',
determinateRadioClass: '',
// class added on hover state (pointer is moved onto input)
hoverClass: 'hover',
// class added on focus state (input has gained focus)
focusClass: 'focus',
// class added on active state (mouse button is pressed on 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,
// set true to activate ARIA support
aria: false,
// add HTML code or text inside customized input
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 style them as you want.
Just include icheck.js after jQuery v1.7+ (or Zepto [polyfill, event, data]).
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
});
HTML5 allows specifying indeterminate ("partially" checked) state for checkboxes. iCheck supports this 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):
indeterminate="true"
<input type="checkbox" indeterminate="true">
<input type="radio" indeterminate="true">
determinate="false"
<input type="checkbox" determinate="false">
<input type="radio" determinate="false">
indeterminate and determinate methods can be used to toggle indeterminate state.
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.
These methods can be used to make changes programmatically (any selectors can be used):
// change input's state to 'checked'
$('input').iCheck('check');
// remove 'checked' state
$('input').iCheck('uncheck');
// toggle 'checked' state
$('input').iCheck('toggle');
// change input's state to 'disabled'
$('input').iCheck('disable');
// remove 'disabled' state
$('input').iCheck('enable');
// change input's state to 'indeterminate'
$('input').iCheck('indeterminate');
// remove 'indeterminate' state
$('input').iCheck('determinate');
// apply input changes, which were done outside the plugin
$('input').iCheck('update');
// remove all traces of iCheck
$('input').iCheck('destroy');
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.
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 of the disadvantages of similar methods:
display: none or visibility: hidden used to hide themWhile 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 6+, Firefox 2+, Opera 9+, Google Chrome and Safari browsers. Should also work in many others.
Mobile browsers (like Opera mini, Chrome mobile, Safari mobile, Android browser, Silk and others) are also supported. Tested on iOS (iPad, iPhone, iPod), Android, BlackBerry and Windows Phone devices.
window.icheck), data attributes (<input data-checkedClass="checked") and direct JavaScript object ($(input).icheck({ options }))$(input).icheck('data') to get all the options were used for customization (also stores a current states values - checked, disabled and indeterminate), $('input').icheck('styler') to get a wrapper div (that's used for customization)indeterminate state$(input).on(callback))cursor or area option)fastclick plugin), see the tap optioninit option (if set to false)ins tag is dropped (less DOM modifications), iCheck wraps each input with a single div and doesn't use any extra markup for the any optionautoAjax option, on by default)autoInit option) - searches for .icheck by default. Classnames can be changed using the window.classes objecthoverLabelClass, focusLabelClass, activeLabelClass, checkedLabelClass, disabledLabelClass and indeterminateLabelClass options (mirror option should be set to true to make this happen)for attribute is set)Note: extended docs and usage examples will be available later.
iCheck plugin is released under the MIT License. Feel free to use it in personal and commercial projects.
[1.0.2] - 2014-03-03
FAQs
Highly customizable checkboxes and radio buttons (jQuery & Zepto)
The npm package icheck receives a total of 18,168 weekly downloads. As such, icheck popularity was classified as popular.
We found that icheck demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.