Bootstrap Switch
Turn checkboxes and radio buttons in toggle switches.
Turn checkboxes and radio buttons in toggle switches.
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>
[...]Add your checkbox.
<input type="checkbox" name="my-checkbox" checked>Initialize Bootstrap Switch.
$("[name='my-checkbox']").bootstrapSwitch();Enjoy.
Change the size programmatically:
<input type="checkbox" checked data-size="large">
<input type="checkbox" checked>
<input type="checkbox" checked data-size="small">
<input type="checkbox" checked data-size="mini">
<input id="dimension-switch" type="checkbox" checked>// Resets to the regular style
$('#dimension-switch').bootstrapSwitch('size', '');
// Sets a mini switch
$('#dimension-switch').bootstrapSwitch('size', 'mini');
// Sets a small switch
$('#dimension-switch').bootstrapSwitch('size', 'small');
// Sets a large switch
$('#dimension-switch').bootstrapSwitch('size', 'large');<input type="checkbox" checked data-on-color="primary" data-off-color="info">
<input type="checkbox" checked data-on-color="info" data-off-color="success">
<input type="checkbox" checked data-on-color="success" data-off-color="warning">
<input type="checkbox" checked data-on-color="warning" data-off-color="danger">
<input type="checkbox" checked data-on-color="danger" data-off-color="default">
<input type="checkbox" checked data-on-color="default" data-off-color="primary">
<input type="checkbox" id="change-color-switch" checked data-on-color="default" data-off-color="primary">$('#change-color-switch').bootstrapSwitch('onColor', 'success');
$('#change-color-switch').bootstrapSwitch('offColor', 'danger');<input type="checkbox" checked data-animate="false">// Enables animation for the selected item
$('#animated-switch').bootstrapSwitch('animate', true);
// Disables animation for the selected item
$('#animated-switch').bootstrapSwitch('animate', false);<input type="checkbox" checked disabled>
<input type="checkbox" checked readonly><input type="checkbox" checked data-on-text="SI" data-off-text="NO">$('#label-switch').bootstrapSwitch('onText', 'I');
$('#label-switch').bootstrapSwitch('offText', 'O');<input type="checkbox" checked data-label-text="TV"><input type="checkbox" checked data-size="large" data-label-text="<span class='glyphicon glyphicon-fullscreen'></span>" data-on-text="<span class='glyphicon glyphicon-ok'></span>" data-off-text="<span class='glyphicon glyphicon-remove'></span>">
<input type="checkbox" checked data-size="large" data-label-text="<span class='fa fa-youtube fa-lg'></span>" data-on-text="<span class='fa fa-thumbs-up fa-lg'></span>" data-off-text="<span class='fa fa-thumbs-down fa-lg'></span>">// passed to init object
$('#events-switch').bootstrapSwitch({
on:
init: function() {
console.log('Initialized!');
}
switchChange: function() {
var $element = $(data.el),
value = data.value;
console.log(e, $element, value);
}
});
// registered as listener
$('#events-switch')
.on('init', function() {
console.log('Initialized!');
})
.on('switchChange', function (e, data) {
var $element = $(data.el),
value = data.value;
console.log(e, $element, value);
})
.bootstrapSwitch();<label id="label-toggle-switch">Click on this Text to change the switch state</label>
<input type="checkbox" checked>$('#label-toggle-switch').on('click', function(e, data) {
$('.label-toggle-switch').bootstrapSwitch('toggleState');
});
$('.label-toggle-switch').on('switchChange', function (e, data) {
alert(data.value);
});$('#toggle-state-switch').bootstrapSwitch('state'); // Get the state
$('#toggle-state-switch').bootstrapSwitch('state', false); // Set the state as off
$('#toggle-state-switch').bootstrapSwitch('state', false, false); // Set the state as off and do not trigger switchChange event
$('#toggle-state-switch').bootstrapSwitch('toggleState'); // Toggle the state
$('#toggle-state-switch').bootstrapSwitch('toggleState'); // Toggle the state and do not trigger switchChange event
$('#destroy-switch').bootstrapSwitch('destroy');$('#disable-switch').bootstrapSwitch('disabled');
$('#disable-switch').bootstrapSwitch('toggleDisabled');
$('#disable-switch').bootstrapSwitch('disabled', true); // true || false
$('#readonly-switch').bootstrapSwitch('readonly');
$('#readonly-switch').bootstrapSwitch('toggleReadonly');
$('#readonly-switch').bootstrapSwitch('readonly', true); // true || false<div class="form-group">
<label for="option1">Option 1</label>
<input id="option1" type="radio" name="radio1" value="option1">
<label for="option2">Option 2</label>
<input id="option2" type="radio" name="radio1" value="option2">
<label for="option3">Option 3</label>
<input id="option3" type="radio" name="radio1" value="option3">
</div><form class="form-horizontal">
<div class="form-group">
<label class="control-label" for="inputEmail">Email</label>
<input type="text" id="inputEmail" placeholder="Email">
</div>
<div class="form-group">
<label class="control-label" for="notification1">Notification 1</label>
<input id="notification1" type="checkbox">
</div>
<div class="form-group">
<label class="control-label" for="notification2">Notification 2</label>
<input id="notification2" type="checkbox">
</div>
<div class="form-actions">
<button type="reset" class="btn btn-inverse">Reset</button>
</div>
</form><a href="#myModal" role="button" class="btn btn-default" data-toggle="modal">Modal</a>
<div class="modal-body">
<input type="checkbox" checked>
</div>