Change the size programmatically:
<input type="checkbox" checked class="switch-large">
<input type="checkbox" checked>
<input type="checkbox" checked class="switch-small">
<input type="checkbox" checked class="switch-mini">
<input id="dimension-switch" type="checkbox" checked>
// Resets to the regular style
$('#dimension-switch').bootstrapSwitch('setSizeClass', '');
// Sets a mini switch
$('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-mini');
// Sets a small switch
$('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-small');
// Sets a large switch
$('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-large');
<input type="checkbox" checked data-on="primary" data-off="info">
<input type="checkbox" checked data-on="info" data-off="success">
<input type="checkbox" checked data-on="success" data-off="warning">
<input type="checkbox" checked data-on="warning" data-off="danger">
<input type="checkbox" checked data-on="danger" data-off="default">
<input type="checkbox" checked data-on="default" data-off="primary">
<input type="checkbox" id="change-color-switch" checked data-on="default" data-off="primary">
$('#change-color-switch').bootstrapSwitch('setOnClass', 'success');
$('#change-color-switch').bootstrapSwitch('setOffClass', 'danger');
<input type="checkbox" checked data-animated="false">
// Enables animation for the selected item
$('#animated-switch').bootstrapSwitch('setAnimated', true);
// Disables animation for the selected item
$('#animated-switch').bootstrapSwitch('setAnimated', false);
<input type="checkbox" checked disabled>
<input type="checkbox" checked readonly>
<input type="checkbox" checked data-on-label="SI" data-off-label="NO">
$('#label-switch').bootstrapSwitch('setOnLabel', 'I');
$('#label-switch').bootstrapSwitch('setOffLabel', 'O');
<input type="checkbox" checked data-text-label="TV">
<input type="checkbox" checked data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
<input type="checkbox" checked class="switch-large" data-label-icon="icon-fullscreen" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
<input type="checkbox" checked class="switch-large" data-label-icon="icon-youtube icon-large" data-on-label="<i class='icon-thumbs-up icon-white'></i>" data-off-label="<i class='icon-thumbs-down'></i>">
<input type="checkbox" class="switch-large" checked data-label-icon="fui-video" data-on-label="<i class='fui-check icon-white'></i>" data-off-label="<i class='fui-cross'></i>">
$('#switch-change').on('switch-change', function (e, data) {
var $element = $(data.el),
value = data.value;
console.log(e, $element, value);
});
<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('switch-change', function (e, data) {
alert(data.value);
});
$('#toggle-state-switch').bootstrapSwitch('state'); // true || false
$('#toggle-state-switch').bootstrapSwitch('toggleState');
$('#toggle-state-switch').bootstrapSwitch('setState', false); // true || false
$('#destroy-switch').bootstrapSwitch('destroy');
$('#create-switch').bootstrapSwitch();
$('#disable-switch').bootstrapSwitch('isDisabled');
$('#disable-switch').bootstrapSwitch('toggleDisabled');
$('#disable-switch').bootstrapSwitch('setDisabled', true); // true || false
$('#readonly-switch').bootstrapSwitch('isReadOnly');
$('#readonly-switch').bootstrapSwitch('toggleReadOnly');
$('#readonly-switch').bootstrapSwitch('setReadOnly', 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>
$('.radio1').on('switch-change', function () {
$('.radio1').bootstrapSwitch('toggleRadioState');
});
// or
$('.radio1').on('switch-change', function () {
$('.radio1').bootstrapSwitch('toggleRadioStateAllowUncheck');
});
// or
$('.radio1').on('switch-change', function () {
$('.radio1').bootstrapSwitch('toggleRadioStateAllowUncheck', false);
});
<div class="form-group">
<label for="option11">Option 1</label>
<input id="option11" type="radio" name="radio2" value="option1">
<label for="option12">Option 2</label>
<input id="option12" type="radio" name="radio2" value="option2" checked="checked">
<label for="option13">Option 3</label>
<input id="option13" type="radio" name="radio2" value="option3">
</div>
$('.radio2').on('switch-change', function () {
$('.radio2').bootstrapSwitch('toggleRadioStateAllowUncheck', true);
});
<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>