Create custom checkboxes by simply defining css styles. This moves all of the presentation to css instead of relying on the jquery plugin to write html.

blt checkbox is VERY lightweight and cross browser friendly. Tested in IE6+, FF3+, Opera 9, Safari 3, Chrome.

How to use

The markup for custom checkboxes is fairly minimal. You must wrap your checkbox/radio inputs in an element. Checkbox/radio input elements must contain an id if you want one returned for use in callback functions.

Examples

Single checkbox

<script type="text/javascript">
$(window).load(function(){
     $('.checkbox_group1').bltCheckbox();
});
</script>
<div class="checkbox_group1">
    <input type="checkbox" class="checkbox" id="checkbox_group1_1"/>
</div>

As Radio Buttons

<script type="text/javascript">
$(window).load(function(){
     $('.checkbox_group2').bltCheckbox({restricted:true});
});
</script>
<div class="checkbox_group2">
    <input type="checkbox" class="checkbox" id="checkbox_group2_1"/>
</div>
<div class="checkbox_group2">
    <input type="checkbox" class="checkbox" id="checkbox_group2_2"/>
</div>

Settings

var default_settings = {
    restricted: false,
    checkedClass: 'checked',
    onChecked: function(data){},
    onUnchecked: function(data){},
    onChange: function(data){}
};

restricted Forces matched checkboxes to act as if they were radio inputs. Only one can be selected at a time.

checkedClass Class that is applied to the input's parent container. Defaults to checked.

onChecked Callback function when input is checked.

onUnchecked Callback function when input is unchecked.

onChange Callback function when input is changed. This is really only useful for radio style inputs. OnChecked will also be called, so beware of duplicate actions.

Demo

For a very bare bones demo with minimal css styling: Demo Site