Super Simple jQuery Radio Button Replacement Plugin - Radio Button

Radio Button is an extremely lightweight jQuery plugin to create a <span> element that represents the radio button. After you have the fake radio element you can easily modify it's appearance with CSS.

See also:

• jQuery Plugin For Labeled Checkbox and Radio Button - Labelauty
• Stylish Checkbox and Radio Button Replacement With jQuery - ScrewDefaultButtons
• Easy jQuery Checkbox and Radio Button Customization - Ion.CheckRadio
• jQuery Customizable Checkboxes and Radio Buttons Plugin - wCheck
• jQuery Plugin For Beautifying Checkboxes And Radio Buttons - iCheck
• Powerful jQuery Checkbox and Radio Button Enhancing Plugin - rlchecked

How to use it:

1. Create a group of radio buttons.

<form>
<p>
<input type="radio" id="male" name="sex" value="male">
<label for="male">Male</label>
</p>
<p>
<input type="radio" id="female" name="sex" value="female" checked>
<label for="female">Female</label>
</p>
</form>

2. Load the jQuery javascript library and radio_button.js script on your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="scripts/radio_button.js"></script> 

3. Initialize the plugin.

<script>
jQuery(':radio').radioButton();
</script>

4. Add the following CSS snippets in your CSS file and change it to your taste.

/* Fake form fields */
*+.fake-radio, .fake-radio+* {
margin-left: 4px
}
.fake-radio {
display: inline-block;
width: 17px;
height: 17px;
vertical-align: middle;
background: url('../images/fake_radio_17x17.png') no-repeat;
cursor: pointer;
text-indent: -99em
}
.fake-radio.active {
background-position: 0 -17px;
cursor: default
}
.lt-ie8 .fake-radio {
display: block;
overflow: hidden;
float: left;
margin: 2px 0 0 0
}

Change log:

v1.2.0 (2014-01-11)

• Changed the way event handlers are being attached.

---

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