iCheck – super customized checkboxes and radio buttons for jQuery & Zepto with Touch devices, keyboard and ready to use skin/theme/styles support
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:
- — 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.
Features
Checkboxes and radio buttons customization (jQuery and Zepto) plugin//platform.twitter.com/widgets.jshttp://www.google-analytics.com/ga.js//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js// <![CDATA[
window.jQuery || document.write('\x3C/script>’);
// ]]>http://./icheck.js?v=1.0.1http://./demo/js/custom.min.js?v=1.0.1// https://platform.twitter.com/js/button.9594287b32ac4ed2228acac1d8fcd7c2.js
- Identical inputs across different browsers and devices — both desktop and mobile
- Touch devices support — iOS, Android, BlackBerry, Windows Phone, Amazon Kindle
- Keyboard accessible inputs — Tab, Spacebar, Arrow up/down and other shortcuts
- Screenreader accessible inputs — ARIA attributes for VoiceOver and others
- Customization freedom — use any HTML and CSS to style inputs (try 6 Retina-ready skins)
- jQuery and Zepto JavaScript libraries support from single file
- Lightweight size — 1 kb gzipped
- 32 options to customize checkboxes and radio buttons
- 11 callbacks to handle changes
- 9 methods to make changes programmatically
- Saves changes to original inputs, works carefully with any selectors
Checkboxes and radio buttons customization (jQuery and Zepto) plugin//platform.twitter.com/widgets.jshttp://www.google-analytics.com/ga.js//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js// <![CDATA[
window.jQuery || document.write('\x3C/script>’);
// ]]>http://./icheck.js?v=1.0.1http://./demo/js/custom.min.js?v=1.0.1// https://platform.twitter.com/js/button.9594287b32ac4ed2228acac1d8fcd7c2.js
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:
// 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});
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):
<!-- 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.
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.
//platform.twitter.com/widgets.jshttp://www.google-analytics.com/ga.js//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js// <![CDATA[
window.jQuery || document.write('\x3C/script>’);
// ]]>http://./icheck.js?v=1.0.1http://./demo/js/custom.min.js?v=1.0.1// https://platform.twitter.com/js/button.9594287b32ac4ed2228acac1d8fcd7c2.js
Browser support
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.
//collector-cdn.github.com/assets/api.js
Website: http://fronteed.com/iCheck/
Thanks for reading,
Nabeel Shahid.
Recent Comments