Stylish Checkbox and Radio Button Replacement With jQuery - ScrewDefaultButtons
File Size: | 45.4KB |
---|---|
Views Total: | 3899 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

ScrewDefaultButtons is a lightweight (~2kb unzipped) jQuery plugin that replaces the default check boxes and radio buttons by using the background-image of your input.
Features:
- Supports 4 states: checked, unchecked, disabled(checked) and disabled(unchecked)
- Supports for
data-sdb-image
attribute to define an image on a specific input. - Select (or un-select) all items by one click
Basic Usage:
1. Load the latest jQuery library and jQuery ScrewDefaultButtons plugin on the page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="js/jquery.screwdefaultbuttonsV2.js"></script>
2. Create a regular set of Radio Buttons
<input type="radio" name="ex1" id="ex1_a"> <label for="ex1_a">A</label> <input type="radio" name="ex1" id="ex1_b"> <label for="ex1_b">B</label> <input type="radio" name="ex1" id="ex1_c"> <label for="ex1_c">C</label>
3. Call the plugin and define the background-image for the radio buttons
<script type="text/javascript"> $(function(){ $('input:radio').screwDefaultButtons({ image: 'url("images/radioSmall.jpg")', width: 43, height: 43 }); }); </script>
This awesome jQuery plugin is developed by mattSOLANO. For more Advanced Usages, please check the demo page or visit the official website.