jQuery Plugin For Beautifying Checkboxes And Radio Buttons - iCheck

jQuery Plugin For Beautifying Checkboxes And Radio Buttons - iCheck
File Size: 459 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

iCheck is a fancy and lightweight jQuery plugin that allows you to create beautiful and highly customizable checkboxes and radio buttons with 25 built-in options and 6 skins.

See also:

Basic Usage:

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="./jquery.icheck.min.js"></script>

2. Choose a theme CSS and include it on the web page. 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
<link href="skins/minimal/red.css" rel="stylesheet">

3. Markup HTML.

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

4. The JavaScript.

<script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_minimal',
    radioClass: 'iradio_minimal',
    increaseArea: '20%' // optional
  });
});
</script>

Changelog:

2015-02-19

  • add dppx unit to HiDPI support

v1.0.2 (2014-03-04)

  • Better HiDPI screens support.

v1.0.0 (2013-12-18)

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

v0.9.1 (2013-09-22)

  • Add support for Kindle Fire HD

This awesome jQuery plugin is developed by fronteed. For more Advanced Usages, please check the demo page or visit the official website.