Stylish Checkbox and Radio Button Replacement With jQuery - ScrewDefaultButtons

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.