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