jQuery Checkbox Plugin by Tomek Wójcik

Dead simple custom checkboxes jQuery plugin

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

Demo

Usage

HTML:

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

JavaScript:

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

HTML after applying checkbox markup:

<div class="checkbox" style="overflow: hidden;">
    <label for="Check1">Option 1</label>
    <div class="jquery-checkbox-wrapper"><a name="Check1" href="#" class="jquery-checkbox"></a></div>
    <input type="checkbox" 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 checkbox method to customize class names. Take a look at JavaScript for demos.

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

License

The plugin in licensed under MIT license.

Download

GitHub: Repository