Bootstrap 3 and Bootstrap switch Example

by Ravindra Athreya

HTML

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.0.1/css/bootstrap3/bootstrap-switch.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.0.1/js/bootstrap-switch.js"></script>
<input id="TheCheckBox" type="checkbox" data-off-text="False" data-on-text="True" checked="false" class="BSswitch">
<label>This Switch is Set to
    <label id="CheckBoxValue" value="None"></label>
</label>
<br />
<br />
<br />
<input id="TheCheckBox2" name="GroupedSwitches" class="BSswitch" type="radio" data-off-text="False" data-on-text="True" checked="false">
<input id="TheCheckBox3" name="GroupedSwitches" class="BSswitch" type="radio" data-off-text="False" data-on-text="True" checked="false">
<input id="TheCheckBox4" name="GroupedSwitches" class="BSswitch" type="radio" data-off-text="False" data-on-text="True" checked="false">
<br/>
<br/>
<br/>
<button type="button" id="toggleSwitches">Disable All Switches</button>
<br/>
<br/>
<br/>
<div class="make-switch">
    <input type="checkbox" checked="true" class="probeProbe" />
</div>
    
    <br><br>
        
            <div class="input-group">
      <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default">
          <input type="radio" checked="checked" name="options" id="option1"> On
        </label>
        <label class="btn btn-default">
          <input type="radio" name="options" id="option2"> Off
        </label>
      </div>
    </div>

JavaScript

$('.BSswitch').bootstrapSwitch('state', true);


$('#CheckBoxValue').text($("#TheCheckBox").bootstrapSwitch('state'));

$('#TheCheckBox').on('switchChange.bootstrapSwitch', function () {

    $("#CheckBoxValue").text($('#TheCheckBox').bootstrapSwitch('state'));
});

$('.probeProbe').bootstrapSwitch('state', true);

$('.probeProbe').on('switchChange.bootstrapSwitch', function (event, state) {

 //   alert(this);
 //   alert(event);
 // alert(state);
    
    if(state){
     alert('AM ON') ;  
    }
    else
    {
         alert('AM OFF') ;
    }
});

$('#toggleSwitches ').click(function () {
    $('.BSswitch ').bootstrapSwitch('toggleDisabled');
    if ($('.BSswitch ').attr('disabled')) {
        $(this).text('Enable All Switches ');
    } else {
        $(this).text('Disable All Switches ');
    }
});