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 | ' ' |
| onInit | Function | Callback function to execute on initialization | Function | function(event) {} |
| 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);| 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...