Checkbox
A jQuery plugin for replacing checkboxes.
Demo
Demos are largely unstyled to give developers a better idea of how the plugin can drop into a new or existing project.
<input type="checkbox" value="1" id="checkbox" name="checkbox">
<label for="checkbox">Checkbox</label>
<input type="radio" value="1" id="radio" name="radio">
<label for="radio">Radio</label>
$("input[type='checkbox'], input[type='radio']").checkbox();
Using Checkbox
Main
checkbox.js
checkbox.css
Dependencies
jQuery
core.js
Basic
Checkbox will automatically detect the input's type and render proper styles.
$("input[type=checkbox], input[type=radio]").checkbox();
<fieldset>
<label for="check_1">Checkbox</label>
<input type="checkbox" name="check_1" id="check_1" value="on">
</fieldset>
<fieldset>
<label for="radio_1">Radio</label>
<input type="radio" name="radio_1" id="radio_1" value="on">
</fieldset>
Toggle
Checkbox can also render a 'toggle' style checkbox.
$("input[type=checkbox]").checkbox({
toggle: true
});
Options
Set instance options by passing a valid object at initialization, or to the public defaults
method. Custom options for a specific instance can also be set by attaching a data-checkbox-options
attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.
Name | Type | Default | Description |
---|---|---|---|
customClass |
string |
'' |
Class applied to instance |
toggle |
boolean |
false |
Render 'toggle' styles |
labels.on |
string |
'ON' |
Label for 'On' position; 'toggle' only |
labels.off |
string |
'OFF' |
Label for 'Off' position; 'toggle' only |
theme |
string |
"fs-light" |
Theme class name |
Methods
Methods are publicly available to all active instances, unless otherwise stated.
disable
Disables target instance
$(".target").checkbox("disable");
enable
Enables target instance
$(".target").checkbox("enable");
update
Updates target instance
$(".target").checkbox("update");
CSS
Class | Type | Description |
---|---|---|
.fs-checkbox-element |
element |
Target elmement |
.fs-checkbox |
element |
Base widget class |
.fs-checkbox.fs-checkbox-checked |
modifier |
Indicates checked state |
.fs-checkbox.fs-checkbox-radio |
modifier |
Indicates radio interface |
.fs-checkbox.fs-checkbox-toggle |
modifier |
Indicates toggle interface |
.fs-checkbox.fs-checkbox-focus |
modifier |
Indicates focused state |
.fs-checkbox.fs-checkbox-disabled |
modifier |
Indicates disabled state |
.fs-checkbox-label |
element |
Label element |
.fs-checkbox-marker |
element |
Marker element |
.fs-checkbox-flag |
element |
Flag element |