This is really old. It was never tested properly, and probably isn't very accessible.
If you want to replace native form widgets I recommend you take a look at the examples in alphagov/govuk_elements
Checkbox'd is a simple, unobtrusive jQuery based replacement script for checkbox and radio inputs.
Checkbox'd makes minimal changes to the existing DOM and does not come with any supplied CSS or other assets. The implementation and styling is completely down to you.
include jQuery and Checkbox'd and apply to your elements.
<label><input type="checkbox" name="foo" value="" /> Yes, I understand.</label>
<label for="radio_1">Option 1</label>
<input type="radio" name="foobar" value="foo" id="radio_1" />
<label for="radio_2">Option 2</label>
<input type="radio" name="foobar" value="bar" id="radio_2" />
<script>
$('input[type="checkbox"],input[type="radio"]').checkboxd();
</script>
Checkbox'd will insert a span
before your input
elements and hide them from view. The span
s can then be styled with different classes for checked and unchecked states with an additional active class added as the input is checked.
All events are handled through the input
's native event handlers.
There are some basic options to help customise the plugin. These are passed as an object on initialisation.
$('input.checkbox').checkboxd({
checkboxClass: 'checkboxd',
radioClass: 'radiod',
checkedClass: 'checked',
activeClass: 'active'
});
The options are as follows:
checkboxClass
string
default: checboxd
The class applied to the checkbox replacement span.
radioClass
string
default: radiod
The class applied to the radio replacement span.
checkedClass
string
default: checked
The class applied to the replacement span when the input is checked.
activeClass
string
default: active
The class applied to the replacement span when the input is being checked.