Highly customizable checkboxes and radio buttons (jQuery & Zepto)

Overview

iCheck plugin 1.0.3

Highly customizable checkboxes and radio buttons for jQuery and Zepto.

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.

Skins

Features

  • Identical inputs across different browsers and devices — both desktop and mobile
  • Touch devices support — iOS, Android, BlackBerry, Windows Phone, Amazon Kindle
  • Keyboard accessible inputsTab, Spacebar, Arrow up/down and other shortcuts
  • Customization freedom — use any HTML and CSS to style inputs (try 6 Retina-ready skins)
  • jQuery and Zepto JavaScript libraries support from single file
  • Screenreader accessible inputsARIA attributes for VoiceOver and others
  • Lightweight size — 1 kb gzipped

How it works

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

{
  // '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.

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

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

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

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

Changelog

October 10, 2020

  • iOS 13 support @markusbroman
  • Reformatted changelog @lasseeee
  • Fire change event when toggled @rafatmyo

March 03, 2014

  • Better HiDPI screens support @ddctd143

January 23, 2014 (v2.0 release candidate)

  • Three ways to set an options: global object (window.icheck), data attributes (<input data-checkedClass="checked") and direct JavaScript object ($(input).icheck({ options }))
  • Huge performance boost (takes less than 1s to customize 1000 inputs)
  • Minimized number of function calls (some slow jQuery functions are replaced with a faster vanilla alternatives without using any dependencies)
  • AMD module definition support (both for jQuery and Zepto)
  • Unblocked native events - iCheck 2.x doesn't stop your newly or past binded events from being processed
  • Pointer events support - full support for phones and tablets that use Windows OS (such as Lumia, HP tablets, desktops with a touch screen, etc)
  • WebOS and Firefox OS support
  • New methods: $(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)
  • Better handling of the indeterminate state
  • Ability to set callbacks in three ways: global object, direct JavaScript object or using bind method ($(input).on(callback))
  • Ability to switch off some of the callbacks when you don't need them (global or per input)
  • Inline styles dropped - iCheck won't add any inline styles to the elements until it's highly needed (cursor or area option)
  • Fast click support - removes a 300ms click delay on mobile devices without any dependencies (iCheck compatible with the fastclick plugin), see the tap option
  • Ability to ignore customization for the selected inputs using init option (if set to false)
  • Optimized event bindings - iCheck binds only a few global events for the all inputs (doesn't increase on elements addition), instead of a couple for the each customized element
  • Doesn't store tons of arbitrary data (event in jQuery or Zepto cache), defines customized elements by specific classnames
  • Extra 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 option
  • Optimized reflows and repaints on init and state changes
  • Better options handling - iCheck will never run a single line of JS to process an options that are off or empty
  • Ability to auto customize the ajax loaded inputs without using any extra code (autoAjax option, on by default)
  • Auto inits on domready using the specified selector (autoInit option) - searches for .icheck by default. Classnames can be changed using the window.classes object
  • Memory usage optimization - uses only a few amount of memory (works well on low-memory devices)
  • Betters callbacks architecture - these are fired only after changes are applied to the input
  • Ability to set a mirror classes between the inputs and assigned labels using the hoverLabelClass, focusLabelClass, activeLabelClass, checkedLabelClass, disabledLabelClass and indeterminateLabelClass options (mirror option should be set to true to make this happen)
  • Fixes some issues of the mobile devices
  • Fixes the issues of the wrapper labels, that loose a click ability in some browsers (if no for attribute is set)
  • Some other options and improvements
  • Various bug fixes

Note: extended docs and usage examples will be available later.

December 19, 2013

  • Added Bower support
  • Added to jQuery plugin registry

December 18, 2013

  • Added ARIA attributes support (for VoiceOver and others) @myfreeweb
  • Added Amazon Kindle support @skinofstars
  • Fixed clickable links inside labels @LeGaS
  • Fixed lines separation between labels and inputs
  • Merged two versions of the plugin (jQuery and Zepto) into one
  • Fixed demo links
  • Fixed callbacks @PepijnSenders

License

iCheck plugin is released under the MIT License. Feel free to use it in personal and commercial projects.

Comments
  • icheck checkboxes do not fire change events when toggled?

    icheck checkboxes do not fire change events when toggled?

    I have a handler for the change event on a checkbox input. When icheck is applied to that checkbox the handler is not called when clicking the checkbox. I also note that the state (checked) is not transferred / registered at the input level, only at the enclosing div. Can check be used with jQuery handlers on the regular checkbox events?

    enhancements 
    opened by brocatus 37
  • iCheck doesn't trigger events for inputs

    iCheck doesn't trigger events for inputs

    I use iCheck in Drupal with built-in feature called #states. It binds to input "change" event, and all js generated automatically. Maybe iCheck should invoke default checkbox (and radio) events manually to not to break default form behavior. I've added trigger call in callbacks function for my current project (only change event), but it would be great to include this feature as custom setting.

    function callbacks(input, checked, callback, keep) { ... $(input).trigger('change'); };

    features 
    opened by player259 19
  • Refresh iCheckbox when users click Back in Browser

    Refresh iCheckbox when users click Back in Browser

    Hi,

    There are one issue when an user clicks on the "Back" button of the browser or using the right click button option and selects "Back".

    The checked iCheckboxes are not updated and are marked instead of do a new read of the checked and not checked checxboxes .

    There is any way to force the plugin to read the document and update the iCheckboxes when users clicks to go "Back" ?

    Thanks

    opened by davidt22 12
  • ifClicked event is actually ifClicking?

    ifClicked event is actually ifClicking?

    For the checkbox, ifClicked event fires before the check status changed.

    Plus, ifToggled event fires when I call check/uncheck the cbox in the code. Is there any event that fires only if user toggled not the code toggled it?

    Now, If I want to post the check status to the server after user uncheck/check the cbox, and when I load the page, I want to get the cbox check status and check the cbox in the code without post to the server again. How should I do that?

    questions 
    opened by tianxu0836 12
  • Infinit loop of callback calling when changing radio state more than once

    Infinit loop of callback calling when changing radio state more than once

    I am using 2.0 RC1 in a Drupal 7. Using radios which trigger an ajax call. When switching the radios checked state from one to the other radio, the very first time, it works fine. But switching a second time, an infinit loop of automatic switching starts. Any idea what this could be?

    questions 
    opened by mazoo 11
  • Is this project maintained?

    Is this project maintained?

    There have been no commits or issue comments since May 2015 for either 1.x or 2.x branches.

    Is v2 still under development? Is there another repo/fork to use?

    questions 
    opened by boughtonp 9
  • ipad ios7 issue

    ipad ios7 issue

    On ipad ios7 only (ios6 works just fine), the checkbox are not working properly when they were not visible on load. The class "checked" is being added but visually the checkbox is not checked. Looking closer it looks like there is an image of the "checked" checkbox behind one that isnt checked.

    I have looked on http://fronteed.com/iCheck/ and i have seen the same issue. Well I cannot see the image behind because the image you are using is not bigger then the not checked version, but if you keep clicking the checkboxes you will see that sometime they check, sometime they dont.

    bugs 
    opened by kamie 9
  • Select all

    Select all

    Hello, how can I do a "select all"?

    I tried that, but it does not work:

    $(document).ready(function () {
        $("#ckbCheckAll").click(function () {
            $(".checkBoxClass").prop('checked', $(this).prop('checked'));
        });
    });
    
    questions 
    opened by ivanionut 9
  • Click event

    Click event

    Hi,

    I have to check in javascript my CHECKBOX...

    So i start to do this $('#ID').click(); to perform this...

    But it doesn't work...

    I see in the plugin that :

    if (type == 'click') {
                                return false;
    

    so my event is never fired... and nothing changed...

    Why the plugin don't work like this:

    • I click my ICHECK checkbox
    • this fire the click event of my checkbox
    • this click event of the checkbox fire the update of my icheck

    Like this... if an onclick event is attached to my original checkbox, it will continue to work.

    What do you think ?

    thanks

    features 
    opened by baurez 9
  • Problems with ios 13

    Problems with ios 13

    Seems like newer iPads with ios 13 (Safari) is not compatible with iCheck.

    Click on input does not trigger toggle. If I click multiple times it sporadically toggles.

    Anyone else experiencing this issue?

    bugs 
    opened by markusbroman 7
  • Any good forks?

    Any good forks?

    Have there been any good forks of this since it got abandoned? I've been trying and trying to find a replacement but can't seem to find an active good one; found a decent CSS based one, but you had to have specific markup with that, which isn't always possible, so that was out, then found another one where clicking the checkbox labels didn't work.

    Going to have to stick to this until a new one is found.

    questions 
    opened by cyphix333 7
  • [Composer\Downloader\TransportException] file could not be downloaded, got redirect without Location (HTTP/1.1 300 Multiple Choices)

    [Composer\Downloader\TransportException] file could not be downloaded, got redirect without Location (HTTP/1.1 300 Multiple Choices)

    I did composer require --dev drupal/core-dev:8.9.20 --update-with-all-dependencies Composer starts installing stuff but then errors

    [Composer\Downloader\TransportException]                                                                                                                 
      The "https://github.com/dargullin/icheck/archive/1.0.2.zip" file could not be downloaded, got redirect without Location (HTTP/1.1 300 Multiple Choices)
    
    opened by nigelwhite 18
  • disable icheck in readonly

    disable icheck in readonly

    input has readonly attribute, but i can change value image image https://user-images.githubusercontent.com/8267607/120604044-e3580380-c461-11eb-8088-045b20b16d57.mp4

    opened by poploock 0
  • Getting issues on touch screens with v1.0.3

    Getting issues on touch screens with v1.0.3

    I was using v1.0.2 and getting issues with touch screen , however I was able t fixed it using the touchend event by adding with IfClicked event. However , after upgraded to v1.0.3 it is not working with on touch screens again even I have applied touchend event . Please help

    opened by bitf12m033 1
Releases(1.0.3)
  • 1.0.3(Oct 9, 2020)

  • 1.0.2(Mar 3, 2014)

  • 1.0.1(Dec 23, 2013)

    Second stable release. First one was v0.9.1, but there's no changelog history for an older versions.

    • Added Bower support
    • Added to jQuery plugin registry
    • Added ARIA attributes support (for VoiceOver and others) @myfreeweb
    • Added Amazon Kindle support @skinofstars
    • Fixed clickable links inside labels @LeGaS
    • Fixed lines separation between labels and inputs
    • Merged two versions of the plugin (jQuery and Zepto) into one
    • Fixed demo links
    • Fixed callbacks @PepijnSenders
    Source code(tar.gz)
    Source code(zip)
Owner
Dar Gullin
Front-End Engineer.
Dar Gullin
Standalone AJAX library inspired by jQuery/zepto

ajax Standalone AJAX library inspired by jQuery/zepto Installation component-install ForbesLindesay/ajax Then load using: var ajax = require('ajax');

Forbes Lindesay 367 Oct 9, 2022
Zepto.js is a minimalist JavaScript library for modern browsers, with a jQuery-compatible API

Zepto.js – a minimalist JavaScript library Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you u

Thomas Fuchs 15k Nov 23, 2022
jQuery easy ticker is a news ticker like plugin, which scrolls the list infinitely. It is highly customizable, flexible with lot of features and works in all browsers.

jQuery Easy Ticker plugin jQuery easy ticker is a news ticker like plugin which scrolls a list infinitely. It is highly customizable, flexible with lo

Aakash Chakravarthy 206 Aug 16, 2022
Type Identity - a powerful and highly customizable authentication and authrozation and access-control framework

Type Identity is a powerful and highly customizable authentication and authrozation and access-control framework. It is the de-facto standard for securing Type Script api beta release

Saeed Mohammed Al-abidi 3 Sep 19, 2022
`raaghu-mfe` is an opensource micro front end framework built on top of `raaghu-elements`, Bootstrap 5 and Storybook offering highly customizable UI components and built-in pages

`raaghu-mfe` is an opensource micro front end framework built on top of `raaghu-elements`, Bootstrap 5 and Storybook offering highly customizable UI components and built-in pages. Raaghu mfe can be used as a base to build complex components and UI layouts whilst maintaining a high level of reusability,flexibility with ease of maintenance.

Wai Technologies 162 Nov 23, 2022
This simple library allows you to create awesome responsive and highly customizable popups importing just one JavaScript file.

Creativa - Popup This is a simple library that allows you to create awesome popups importing just one JavaScript file. Getting started You can import

Eduardo Mollo 5 Mar 29, 2022
🛡️ Dead-simple, yet highly customizable security middleware for Apollo GraphQL servers and Envelop 🛡️

GraphQL Armor ??️ GraphQL Armor is a dead-simple yet highly customizable security middleware for various GraphQL server engines. Contents Contents Sup

Escape – GraphQL Security 247 Nov 24, 2022
A highly customizable homepage (or startpage / application dashboard) with Docker and service API integrations.

Features Web Bookmarks Service Bookmarks Docker Integration Status light + CPU, Memory & Network Reporting (click on the status light) Service Integra

Ben Phelps 2.7k Nov 23, 2022
A beautiful, responsive, highly customizable and accessible replacement for JavaScript's popup boxes. Zero dependencies.Alerts ,dialogs

AsgarAlert (v1) for JS Install <script defer src="/asgar-alert.js"></script> Examples The most basic message: asgar("Hello world!"); A message signali

Asgar Aliyev 6 Oct 10, 2021
A highly customizable platform ready to be a portfolio website, and become a lot more with some of your own components

Vextra Elegant and animated portfolio website. Demo: vextra.vercel.app Vextra is a portfolio template, packed with animations with a satisfying flow t

null 3 Sep 19, 2022
Easy to setup and highly customizable leaderboard with built-in score validation system.

EasyLeaderboard Add a leaderboard to your game in under 10 minutes! ?? Ready to go game clients make adding a leaderboard quick and easy ??️ Extendabl

Garrett Allen 12 Sep 30, 2022
Fancytree - JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkboxes, drag'n'drop, and lazy loading

Fancytree Fancytree (sequel of DynaTree 1.x) is a JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkb

Martin Wendt 2.6k Nov 24, 2022
🔨 A more engineered, highly customizable, standard output format commitizen adapter.

cz-git Github | Installation | Website | 简体中文文档 Introduction A more engineered, highly customizable, standard output format commitizen adapter. What i

zhengqbbb 367 Nov 27, 2022
iOS 7 style switches for your checkboxes

Description Switchery is a simple component that helps you turn your default HTML checkbox inputs into beautiful iOS 7 style switches in just few simp

Alexander Petkov 2.1k Nov 28, 2022
A JavaScript library for creating "select-all" checkboxes

SelectAllCheckbox v1.0 See LICENSE for this software's licensing terms. SelectAllCheckbox is a JavaScript library which makes it easy to create "selec

Kurtis LoVerde 1 Jul 27, 2021
Converts select multiple elements into dropdown menus with checkboxes

jquery-multi-select Converts <select multiple> elements into dropdown menus with a checkbox for each <option>. The original <select> element is hidden

mySociety 21 Oct 13, 2022
A pure CSS toggle switch for form input checkboxes

Toggle Switchy A pure CSS toggle switch for form input checkboxes Preview Installation CSS <link rel="stylesheet" href="toggle-switchy.css"> HTML <lab

Adam Culpepper 31 Nov 7, 2022
An application where a user can search a location by name and specify a genre of music. Based on the parameters entered, a list of radio stations generate based on genre selected in that area.

Signs of the Times Description An application that allows for the user to enter a date and see the horoscope for that day, and famous people born on t

null 3 Nov 3, 2022
Semana Javascript Expert 6 - Spotify Radio

Spotify Radio - Semana JS Expert 6.0 Projeto desenvolvido na Semana Javascript Expert ministrada pelo mestre Erick Wendel. O Projeto O projeto é um St

null 9 Jun 14, 2022