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();
View All Demos

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