Bootstrap Switch

Include the dependencies: jQuery, Bootstrap and Bootstrap Switch CSS + Javascript.

[...]
<link href="bootstrap.css" rel="stylesheet">
<link href="bootstrap-switch.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="bootstrap-switch.js"></script>
[...]

Add your checkbox.

<input type="checkbox" name="my-checkbox" checked>

Initialize Bootstrap Switch.

$("[name='my-checkbox']").bootstrapSwitch();

Enjoy.

Options

Name	Type	Description	Values	Default
state	Boolean	The checkbox state	true, false	'checked' attribute or true
size	String	The checkbox state	'mini', 'small', 'normal', 'large'	'normal'
animate	Boolean	Animate the switch	true, false	true
disabled	Boolean	Disable state	true, false	'disabled' attribute or false
readonly	Boolean	Readonly state	true, false	'readonly' attribute or false
onColor	String	Color of the left side of the switch	'primary', 'info', 'success', 'warning', 'danger', 'default'	'primary'
offColor	String	Color of the right side of the switch	'primary', 'info', 'success', 'warning', 'danger', 'default'	'default'
onText	String	Text of the left side of the switch	String	'ON'
offText	String	Text of the right side of the switch	String	'OFF'
labelText	String	Text of the center handle of the switch	String	' '
baseClass	String	Prefix of every other used class	String	'bootstrap-switch'
wrapperClass	String \| Array	Container element class(es)	String \| Array	'wrapper'
onModifierClass	String	On Modifier class, used when the switch state is true	String	'on'
offModifierClass	String	Off Modifier class, used when the switch state is false	String	'off'
focusedModifierClass	String	Focused Modifier class, used when the switch is focused	String	'focused'
animateModifierClass	String	Animate Modifier class, used to apply CSS animation to the switch	String	'animate'
disabledModifierClass	String	Disabled Modifier class, used the switch is disabled	String	'disabled'
readonlyModifierClass	String	Readonly Modifier class, used the switch is readonly	String	'readonly'
onInit	Function	Callback function to execute on initialization	Function	`function(event, state) {}`
onSwitchChange	Function	Callback function to execute on switch state change	Function	`function(event, state) {}`

Methods

In Bootstrap Switch, every option is also a method.

You can call a method in this way:

$('input[name="my-checkbox"]').bootstrapSwitch('state'[, true][, true]);

If the second parameter is not specified, the current option is returned.

Pass 'true' to 'state' as third parameter, or to 'toggleState' as second parameter in order to avoid the `switchChange` event execution.

Additional Methods

Name	Description
toggleState	Toggle the switch state
toggleDisabled	Toggle the disabled state
toggleReadonly	Toggle the readonly state
destroy	Destroy the instance of Bootstrap Switch

Events

You can register to the emitted events as follow:

$('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
  console.log(this); // DOM element
  console.log(event); // jQuery event
  console.log(state); // true | false
});

Name	Description	Parameters
init	Triggered on initialization. 'this' refers to the DOM element.	event (jQuery Event object)
switchChange	Triggered on switch state change. 'this' refers to the DOM element.	event (jQuery Event object), state (true \| false)

Getting Started

Documentation 3

Options

Methods

Additional Methods

Events

ExamplesTo be included

Documentation 2.0.1To be included