alextea / Checkbox-d

A simple unobtrusive checkbox & radio button replacement for jQuery

Don't use

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

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.

Basic Usage

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 spans 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.

Options

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.