#checkator

New Post has been published on http://www.htmluse.com/checkator-replacement-for-radio-and-checkbox-elements/

Checkator - Replacement for radio and checkbox elements

Download   Demo

This jquery plugin Checkator is a jQuery-based replacement for radio and checkbox elements. It supports css styling, and affects the original radio or checkbox element directly, which is used as the data container.

Browser compatibility

IE 9+

Chrome 2+

Firefox 3.5+

Safari 4+

Opera 10.5+

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="fm.checkator.jquery.css"/> <script src="jquery-1.11.0.min.js"></script> <script src="fm.checkator.jquery.js"></script>

2. HTML

<input type="radio" name="radio1" class="radio1" id="radio1_1">

3. JAVASCRIPT

$('.radio1').checkator();

4. ADVANCED

HTML mangling

The plugin will wrap the original elements inside divs, and add a div after original element, like shown below:

Before:

<input type="radio" name="radio1" class="radio1" id="radio1_1">

After:

<div class="checkator_holder radio"> <input type="radio" name="radio1" class="radio1 checkator_source" id="radio1_1" style="opacity: 0;"> <div id="checkator_radio1_1" class="checkator radio"></div> </div>

CSS classes

Here is a list of all the css classes

Class Description checkator This is the new radio or checkbox element. It has some extra classes called radio and checkbox, which tell if it is a radio button or a checkbox. prefix_holder The holder for the original element and the new replacement element. prefix_chosen_item The holder for the chosen item.

DOM Structure

holder: containing the radio|checkbox class

source

checkator

jQuery methods

Method Description destroy This method is used to remove the instance of the plugin from the radio or checkbox and restore it to its original state.

Method usage