jQuery Radiobutton Plugin by Tomek Wójcik

Dead simple custom radiobuttons jQuery plugin

This is a very simple radiobutton plugin for jQuery. It's simple, lightweight and easily styllable.

Demo

Usage

HTML:

<div class="radiobutton">
    <label for="Check1">Option 1</label>
    <input type="radio" name="name" id="Check1" value="1" checked="checked" />
</div>

JavaScript:

$('#Check1').radiobutton();

HTML after applying radiobutton markup:

<div class="radiobutton" style="overflow: hidden;">
    <label for="Check1">Option 1</label>
    <div class="jquery-radiobutton-wrapper"><a name="Check1" rel="name" href="#" class="jquery-radiobutton jquery-radiobutton-on"></a></div>
    <input type="radio" checked="checked" value="1" id="Check1" name="check1" style="position: absolute; top: -200px; left: -200px;">
</div>

NOTE: The top and left positioning of the input itself is done to keep label working in IE 7+.

Styling

You can style the output HTML as you please. Take a look at CSS for demos to see how it's done.

Compatibility

The plugin has been tested and is compatible with Internet Explorer 7+, Firefox 3.6+, Opera 10, Safari 5 and Google Chrome.

Options

You can pass additional options to the radiobutton method to customize class names. Take a look at JavaScript for demos.

$('#demo2 input').radiobutton({
    className: 'jquery-switch',
    checkedClass: 'jquery-switch-on',
});

License

The plugin in licensed under MIT license.

Download

GitHub: Repository