Bootstrap switch - by Mattia Larentis (@SpiritualGuru)

Size

<div class="switch switch-large">
    <input type="checkbox" checked />
</div>

<div class="switch">
    <input type="checkbox" checked />
</div>

<div class="switch switch-small">
    <input type="checkbox" checked />
</div>

<div class="switch switch-mini">
    <input type="checkbox" checked />
</div>

Colors

<div class="switch" data-on="primary" data-off="info">
    <input type="checkbox" checked />
</div>

<div class="switch" data-on="info" data-off="success">
    <input type="checkbox" checked />
</div>

<div class="switch" data-on="success" data-off="warning">
    <input type="checkbox" checked />
</div>

<div class="switch" data-on="warning" data-off="danger">
    <input type="checkbox" checked />
</div>

<div class="switch" data-on="danger" data-off="primary">
    <input type="checkbox" checked />
</div>

Animation

<div class="switch" data-animated="false">
    <input type="checkbox" checked />
</div>

Disabled

<div class="switch">
   <input type="checkbox" checked disabled />
</div>

Text

<div class="switch" data-on-label="SI" data-off-label="NO">
    <input type="checkbox" checked />
</div>

HTML text

<div class="switch" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
    <input type="checkbox" checked />
</div>

Event handler javascript

$('#mySwitch').on('switch-change', function (e, data) {
    var $el = $(data.el)
      , value = data.value;
    console.log(e, $el, value);
});

Toggle State javascript

$('#toggle-state-switch').bootstrapSwitch('toggleState');
$('#toggle-state-switch').bootstrapSwitch('setState', false); // true || false

Destroy javascript

$('#destroy-switch').bootstrapSwitch('destroy');

Create javascript

$('#create-switch').wrap('<div class="switch" />').parent().bootstrapSwitch();

Disabled javascript

$('#disable-switch').bootstrapSwitch('isActive');
$('#disable-switch').bootstrapSwitch('toggleActivation');
$('#disable-switch').bootstrapSwitch('setActive', false);  // true || false

Radio - radioboxes 1

    <div class="control-group exemple1">
      <br /><br />
        <div id="radio1" class="controls">
            <label class="control-label" for="yes">Yes</label>
            <div id="yes" class="switch radio1" data-on-label="Yes" data-off-label="No" data-on="success" data-off="danger">
                <input type="radio" name="radio1" class="check demo-1" value="1" checked="checked" />
            </div>
            <label class="control-label" for="no">No</label>
            <div id="no" class="switch radio1" data-on-label="Yes" data-off-label="No" data-on="success" data-off="danger">
                <input type="radio" name="radio1" class="check demo-1" value="0" />
            </div>
        </div>
    </div>
<script>
$(document).ready(function() {
    $('.radio1').on('click', function () {
        $(this).addClass('is-checked');
            if($('div').not('.is-checked')) {
                $('.radio1').bootstrapSwitch('toggleState');
            }
            if($(this).bootstrapSwitch('isActive') == true) {
                $('.is-checked').bootstrapSwitch('toggleState');
                $(this).removeClass('is-checked');
            }
    });
</script>

Radio - radioboxes 2

    <div id="exemple2" class="control-group exemple2">
        <br /><br />
        <div class="control-group" style="margin-bottom: 2%;">
          <div style="width: 10%;float: left;">
              <label class="control-label" for="option1">Option 1
          </div>
            <div class="controls radio2">
              <div id="option1" class="switch option1">
                <input id="radio1" type="radio" name="radio2" value="option1" checked="checked" />
              </div>
            </div>
        </div>
        <div class="control-group" style="margin-bottom: 2%;">
            <div style="width: 10%;float: left;">
              <label class="control-label" for="option2">Option 2</label>
            </div>
            <div class="controls radio2">
              <div id="option2" class="switch option2">
                <input id="radio2" type="radio" name="radio2" value="option2" />
              </div>
            </div>
        </div>
        <div class="control-group" style="margin-bottom: 2%;">
            <div style="width: 10%;float: left;">
              <label class="control-label" for="option3">Option 3</label>
            </div>
            <div class="controls radio2">
              <div id="option3" class="switch option3">
                <input id="radio3" type="radio" name="radio2" value="option3" />
              </div>
            </div>
        </div>
    </div>
<script>
$(document).ready(function() {
    $('.radio2').on('click', function () {
        $(this).addClass('is-checked');
            if($('div').not('.is-checked')) {
                $('.radio2').bootstrapSwitch('toggleState');
            }
            if($(this).bootstrapSwitch('isActive') == true) {
                $('.is-checked').bootstrapSwitch('toggleState');
                $(this).removeClass('is-checked');
            }
    });
</script>