Turn checkboxes and radio buttons in toggle switches.
Select the version to download:
Documentation in progress!
It might not seem, but it's actually a lot of work. The goal is to make it as cleanest, most readable and
understandable as possible.
If you feel there is something missing, submit a
pull request with your changes. Every
help is needed. Many thanks.
data-*$.fn.bootstrapSwitch.Constructor.data('bootstrap-switch')baseClass and wrapperClass optionsonInit eventInclude 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.
| Name | Type | Description | Values | Default |
|---|---|---|---|---|
| state | Boolean | The checkbox state | true, false | 'checked' attribute or true |
| size | String | The checkbox state | null, 'mini', 'small', 'normal', 'large' | null |
| 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 | Global class prefix | String | 'bootstrap-switch' |
| wrapperClass | String | Array | Container element class(es) | String | Array | 'wrapper' |
| onInit | Function | Callback function to execute on initialization | Function |
|
| onSwitchChange | Function | Callback function to execute on switch state change | Function |
|
Follow the jQuery convention to override the default options of the library. For instance:
$.fn.bootstrapSwitch.defaults.size = 'large';
$.fn.bootstrapSwitch.defaults.onColor = 'success';In Bootstrap Switch, every option is also a method.
If the second parameter is omitted, the method return the current value.
You can invoke methods as follows:
$('input[name="my-checkbox"]').bootstrapSwitch('state', true, true);| Name | Description |
|---|---|
| toggleState | Toggle the switch state |
| toggleDisabled | Toggle the disabled state |
| toggleReadonly | Toggle the readonly state |
| destroy | Destroy the instance of Bootstrap Switch |
state can receive an optional third parameter skip. if true, switchChange event is not executed. The default is false.toggleState can receive an optional second parameter skip. if true, switchChange event is not executed. The default is false.wrapperClass can accepts a falsy value as second parameter. If so, it resets the class to its default.
All the events are namespaced, therefore always append .bootstrapSwitch when you
attach your handlers.
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) |
To be included
All the options are accepted only using data-* attributes on the input element.
The exceptions are checked, disabled and readonly which are
proprietary input attributes.
There isn't any way to specify the options in JavaScript during initialization.
| 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' | '' |
| 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 |
| on | String | Color of the left side of the switch | 'primary', 'info', 'success', 'warning', 'danger', 'default' | null |
| off | String | Color of the right side of the switch | 'primary', 'info', 'success', 'warning', 'danger', 'default' | null |
| on-label | String | Text of the left side of the switch | String | 'ON' |
| off-label | String | Text of the right side of the switch | String | 'OFF' |
| text-label | String | Text of the center handle of the switch | String | ' ' |
| label-icon | String | Text of the center handle of the switch. Use to include external services icons | String | null |
| Name | Description | Accepted Values | Returned Values |
|---|---|---|---|
| state | Get checkbox state | true, false | |
| setState | Set checkbox state | (value: true, false)[, skip: true, false] | jQuery Object (input element) |
| toggleState | Toggle checkbox state | [skip: true, false] | jQuery Object (input element) |
| toggleRadioState | Toggle radio state | [skip: true, false] | jQuery Object (input element) |
| toggleRadioStateAllowUncheck | Toggle radio state allowing uncheck of the radio input | [uncheck: true, false | skip: true, false] | jQuery Object (input element) |
| setSizeClass | Set the size of the switch | '', 'mini', 'small', 'normal', 'large' | jQuery Object (input element) |
| setAnimated | Animate the switch | true, false | jQuery Object (input element) |
| isDisabled | Get disabled state | true, false | |
| setDisabled | Set disable state | true, false | jQuery Object (input element) |
| toggleDisabled | Toggle disabled state | jQuery Object (input element) | |
| isReadOnly | Get Readonly state | true, false | |
| setReadOnly | Set Readonly state | true, false | jQuery Object (input element) |
| toggleReadOnly | Toggle readonly state | jQuery Object (input element) | |
| setOnClass | Color of the left side of the switch | 'primary', 'info', 'success', 'warning', 'danger', 'default' | jQuery Object (input element) |
| setOffClass | Color of the right side of the switch | 'primary', 'info', 'success', 'warning', 'danger', 'default' | jQuery Object (input element) |
| setOnLabel | Text of the left side of the switch | String | jQuery Object (input element) |
| setOffLabel | Text of the right side of the switch | String | jQuery Object (input element) |
| setTextLabel | Text of the center handle of the switch | String | null |
| setTextIcon | Text of the center handle of the switch. Use to include external services icons | String | null |
| destroy | Destroy the instance of Bootstrap Switch | jQuery Object (input element) |
The only event triggered it switch-change. It returns two parameters: event and
data.
The latter is an object that include el (the input DOM element) and value (the
new input state)