New Post has been published on Html Use
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
$('#selectBox').checkator('destroy');