Press "Enter" to skip to content

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

accessible radio buttons example, radio button keyboard accessibility, accessible custom checkbox, accessible custom radio buttons, how to hide checkbox in html, how to hide radio button in html

How to make use of it:

1. Include 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 and accomplished it.

$('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
});

Beautifying Checkboxes And Radio Buttons, icheck radio button checked jquery, icheck Plugin/Github, how to hide checkbox in javascript, hide radio button circle bs

icheck-Demo

icheck-Demo-a


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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.