super customized checkboxes and radio buttons with jQuery & Zepto

iCheck

@Damir Foy

Plugin features

Demo

Add checked state to 1 and 3 inputs show code
$('#input-1, #input-3').iCheck('check');
Remove checked state from 1 and 3 inputs show code
$('#input-1, #input-3').iCheck('uncheck');
Add disabled state to 2 and 4 inputs show code
$('#input-2, #input-4').iCheck('disable');
Remove disabled state from 2 and 4 inputs show code
$('#input-2, #input-4').iCheck('enable');
Remove all traces of iCheck show code
$('input').iCheck('destroy');

Callbacks

Skins

Minimal skin

Live

Color schemes

States

  • Normal
  • Hover
  • Checked
  • Disabled
  • Disabled & checked
Demo

For Zepto library, instead of jquery.icheck.js use zepto.icheck.js.

If you need a minified version, use jquery.icheck.min.js or zepto.icheck.min.js.

  • Choose a color scheme, there are 10 different styles available:
    • Black — minimal.css
    • Red — red.css
    • Green — green.css
    • Blue — blue.css
    • Aero — aero.css
    • Grey — grey.css
    • Orange — orange.css
    • Yellow — yellow.css
    • Pink — pink.css
    • Purple — purple.css
  • Copy /skins/minimal/ folder and jquery.icheck.js file to your site.
  • 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 color scheme:

    <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" 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>
    
  • Done.
Usage

Square skin

Live

Color schemes

States

  • Normal
  • Hover
  • Checked
  • Disabled
  • Disabled & checked
Demo

For Zepto library, instead of jquery.icheck.js use zepto.icheck.js.

If you need a minified version, use jquery.icheck.min.js or zepto.icheck.min.js.

  • Choose a color scheme, there are 10 different styles available:
    • Black — square.css
    • Red — red.css
    • Green — green.css
    • Blue — blue.css
    • Aero — aero.css
    • Grey — grey.css
    • Orange — orange.css
    • Yellow — yellow.css
    • Pink — pink.css
    • Purple — purple.css
  • Copy /skins/square/ folder and jquery.icheck.js file to your site.
  • 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 color scheme:

    <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" 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>
    
  • Done.
Usage

Flat skin

Live

Color schemes

States

  • Normal
  • Checked
  • Disabled
  • Disabled & checked
Demo

For Zepto library, instead of jquery.icheck.js use zepto.icheck.js.

If you need a minified version, use jquery.icheck.min.js or zepto.icheck.min.js.

  • Choose a color scheme, there are 10 different styles available:
    • Black — square.css
    • Red — red.css
    • Green — green.css
    • Blue — blue.css
    • Aero — aero.css
    • Grey — grey.css
    • Orange — orange.css
    • Yellow — yellow.css
    • Pink — pink.css
    • Purple — purple.css
  • Copy /skins/flat/ folder and jquery.icheck.js file to your site.
  • 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 color scheme:

    <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" 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>
    
  • Done.
Usage

Line skin

Live

Color schemes

States

  • Normal
  • Hover
  • Checked
  • Disabled
  • Disabled & checked
Demo

For Zepto library, instead of jquery.icheck.js use zepto.icheck.js.

If you need a minified version, use jquery.icheck.min.js or zepto.icheck.min.js.

  • Choose a color scheme, there are 10 different styles available:
    • Black — line.css
    • Red — red.css
    • Green — green.css
    • Blue — blue.css
    • Aero — aero.css
    • Grey — grey.css
    • Orange — orange.css
    • Yellow — yellow.css
    • Pink — pink.css
    • Purple — purple.css
  • Copy /skins/line/ folder and jquery.icheck.js file to your site.
  • 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 color scheme:

    <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" 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>
    
  • Done.
Usage

Polaris skin

Live

States

  • Normal
  • Hover
  • Checked
  • Disabled
  • Disabled & checked
Demo

For Zepto library, instead of jquery.icheck.js use zepto.icheck.js.

If you need a minified version, use jquery.icheck.min.js or zepto.icheck.min.js.

  • Copy /skins/polaris/ folder and jquery.icheck.js file to your site.
  • 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" 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>
    
  • Done.
Usage

Futurico skin

Live

States

  • Normal
  • Checked
  • Disabled
  • Disabled & checked
Demo

For Zepto library, instead of jquery.icheck.js use zepto.icheck.js.

If you need a minified version, use jquery.icheck.min.js or zepto.icheck.min.js.

  • Copy /skins/futurico/ folder and jquery.icheck.js file to your site.
  • 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" 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>
    
  • Done.
Usage

All skins (except Line) are transparent, you may use them on any background.

Square, Flat, Polaris and Futurico skins are based on Designmodo's UI packs.

Simple usage

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:

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

{
  // '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 (hovered or touched)
  hoverClass: 'hover',

  // class added on focus state (mostly when keyboard is used)
  focusClass: 'focus',

  // class added on active state (likely when clicked)
  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' 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: ''
}

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

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.7+ or Zepto library should be included in your HTML.

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 or disabled state is changed
ifChecked input's state is changed to checked
ifUnchecked checked state is removed
ifDisabled input's state is changed to disabled
ifEnabled disabled state is removed
ifCreated input is just customized
ifDestroyed customization is just removed

Use on() method to bind them:

$('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. All return original inputs in $(this).

You may use any selectors, iCheck will find checkboxes and radio buttons itself.

$('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('update'); — apply input changes, which were done outside the plugin

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

Comparison

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.

Browser support

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 and others) are also supported. Tested on iOS (iPad, iPhone, iPod), Android, BlackBerry and Windows Phone devices.

Download plugin
iCheck plugin is released under the MIT License. Feel free to use it in personal and commercial projects.
Fork me on GitHub