Turn checkboxes and radio buttons in toggle switches.
Choose your version:
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 | |
| onSwitchChange | Function | Callback function to execute on switch state change | Function | |
In Bootstrap Switch, every option is also a method.
You can call a method in this way:
$('input[name="my-checkbox"]').bootstrapSwitch('state', 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 |
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) |
Working on this...