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>
[...]

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'
containerClass	String \| Array	Wrapper element class(es)	String \| Array	'container'
handleOnClass	String \| Array	Handle On element class(es)	String \| Array	'handle-on'
handleOffClass	String \| Array	Handle Off element class(es)	String \| Array	'handle-off'
labelClass	String \| Array	Label element class(es)	String \| Array	'label'
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) {}`

In Bootstrap Switch, every option is also a method.

You can call a method in this way:

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

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

You can register to the emitted events as follow:

$('inputy[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)

State

Working on this...

Getting Started

Options

Methods

Additional Methods

Events

Examples

State