[Zepto] A Simple and Fully Accessible Checkboxes and Radio Buttons | icheck

iCheck is Highly customizable checkboxes and radio buttons for jQuery and Zepto. This plugin allows you to create fully accessible touch checkboxes and radio buttons with 25 built-in options and 6 shapes.

Features

  • Identical inputs across different browsers and devices — both desktop and mobile
  • Touch devises support — iOS, Android, BlackBerry, Windows Phone, Amazon Kindle
  • Keyboard accessible inputs — TabSpacebarArrow 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 single file
  • Screenreader accessible inputs — ARIA attributes for VoiceOver and others
  • Lightweight size — 1 kb gzipped

Must Read: [icheck] Pure CSS Checkboxes and Radio Buttons for Twitter Bootstrap

How to make use of it:

1. Include the jQuery library and iCheck plugin within the head section of your web page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/icheck.min.js"></script>

2. Choose a skin CSS and include it on the net web page.

<!-- All In One -->
<link href="skins/all.css" rel="stylesheet" />

<!-- Flat Theme -->
<link href="skins/flat/red.css" rel="stylesheet" />

<!-- Futurico Theme -->
<link href="skins/futurico/red.css" rel="stylesheet" />

<!-- Line Theme -->
<link href="skins/line/red.css" rel="stylesheet" />

<!-- Minimal Theme -->
<link href="skins/minimal/red.css" rel="stylesheet" />

<!-- Polaris Theme -->
<link href="skins/polaris/red.css" rel="stylesheet" />

<!-- Square Theme -->
<link href="skins/square/red.css" rel="stylesheet" />

3. Create checkboxes and radio buttons on the web page.

<input type="checkbox">
<input type="checkbox" checked>
<input type="radio" name="iCheck">
<input type="radio" name="iCheck" checked>

4. Activate the plugin.

$('input').iCheck({
  checkboxClass: 'icheckbox_minimal',
  radioClass: 'iradio_minimal'
});

5. Full plugin choices with default values.

$('input').iCheck({

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

});

6. API strategies.

// check/uncheck
$('input').iCheck('check');
$('input').iCheck('uncheck');

// toggle between states
$('input').iCheck('toggle');

// enable/disable
$('input').iCheck('disable');
$('input').iCheck('enable');

// set state to indeterminate
$('input').iCheck('indeterminate');
$('input').iCheck('determinate');

// apply input changes 
$('input').iCheck('up<a href="#!">date</a>');

// destroy
$('input').iCheck('destroy'); 

7. Event handlers.

$('input').on('ifClicked', function(event){
  // do something
});

$('input').on('ifChanged', function(event){
  // do something
});

$('input').on('ifChecked', function(event){
  // do something
});

$('input').on('ifUnchecked', function(event){
  // do something
});

$('input').on('ifToggled', function(event){
  // do something
});

$('input').on('ifDisabled', function(event){
  // do something
});

$('input').on('ifEnabled', function(event){
  // do something
});

$('input').on('ifIndeterminate', function(event){
  // do something
});

$('input').on('ifDeterminate', function(event){
  // do something
});

$('input').on('ifCreated', function(event){
  // do something
});

$('input').on('ifDestroyed', function(event){
  // do something
});

 

icheck-Demo

icheck-Demo-a

iCheck was created to avoid the red tape of reinventing the wheel when working with checkboxes and radio buttons. Provides an identical result expected for the huge number of browsers, devices, and their versions. Callbacks and methods can be used to easily handle and make changes on custom inputs.

There are some CSS3 methods available for styling checkboxes and radio buttons, like this one. You need to know some disadvantages of similar methods:

Inputs are not accessible through the keyboard, because display: none or visibility: hidden are used to hide them

  • Poor browser support
  • Multiple errors on mobile devices
  • Tricky and harder to maintain CSS code
  • JavaScript is still needed to fix certain issues
  • While the CSS3 method is a very limited solution, iCheck is designed to be an everyday alternative that covers most tasks.

Browser support

iCheck has been verified to work in Internet Explorer 6+, Firefox 2+, Opera 9+, Google Chrome and Safari browsers. It should also work in many others.

Mobile browsers (such as Opera mini, Chrome mobile, Safari mobile, Android browser, Silk, etc.) are also supported. Tested on iOS (iPad, iPhone, iPod), Android, BlackBerry, and Windows Phone devices.

Callbacks

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

Callback nameWhen used
ifClickedthe user clicked on a customized input or an assigned label
ifChangedinput’s “checked”, “disabled” or “indeterminate” state is changed
ifCheckedinput’s state is changed to “checked”
ifUncheckedThe “checked” state is removed
ifToggledinput’s “checked” state is changed
ifDisabledinput’s state is changed to “disabled”
ifEnabledThe “disabled” state is removed
ifIndeterminateinput’s state is changed to “indeterminate”
ifDeterminateThe “indeterminate” state is removed
ifCreatedinput is just customized
ifDestroyedcustomization is just removed

See Demo And Download

Official Website(dargullin): Click Here

This superior jQuery/javascript plugin is developed by dargullin. For extra advanced usage, please go to the official website.

Related Posts

Audio-Visualizations-Wave

How to Create Audio Visualizations with JavaScript | Wave.js

Audio Visualizer Library – wave.js is a vanilla javascript audio visualization library that provides 20+ creative audio visualization effects to bring more engagement to your visitor. Contribute…

fireworks-js

A Simple Fireworks Animation With JavaScript | fireworks-js

fireworks-js is a JavaScript library that adds configurable fireworks animations with sound effects to your webpage. Features 🔥 Zero dependencies ⚙️ Flexible configuration 📦 Lightweight (~3.0kB gzipped)…

Side-Navigation-Menu-With-Dropdowns-jSide

[Off-Canvas] Simple and Clean Side Navigation Menu With Dropdowns | jSide Menu

JSide menu is a well-designed, simple, and clean side-scrolling menu with dropdown menus. This plugin creates a sticky hamburger button at the top of the page that…

Searchable-Select-Dropdown

A Simple Searchable Select Dropdown Plugin | jQuery Select Search

Simple jQuery search on the selection options plugin for your website. Next, there is a checkbox replacement plugin that refines and beautifies the original selection element with…

country-dropdown-with-flags

A Quick jQuery-Based Country Picker With Flags | Country Select JS

Country Select JS is a jQuery plugin to select a country, based on the international phone input plugin. Adds a flag dropdown to any input, which lists…

Autocomplete-and-Typeahead-Javascript-Library

Simple and Fast Autocomplete and Typeahead Javascript Library | autoComplete.js

autoComplete.js is a simple, pure, and incrementally designed JavaScript library for speed, high versatility, and seamless integration with a wide variety of projects and systems. Features Pure…