Bootstrap 3 and Bootstrap switch Example

by Manoj Kumar

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="Yes" data-on-text="No" checked="false" class="BSswitch">
  
<label>This Switch is Set to
    <label id="CheckBoxValue" value="None"></label>
</label>

    <p> <a class="btn btn-lg btn-primary" href="#">Display another Toggle</a></p>

JavaScript

$('.btn').on('click', function () {
    $('p').after(
        '<input id="newCheckBox" type="checkbox" data-off-text="Male" data-on-text="Female" checked="false" class="newBSswitch">'
    );
    $('.newBSswitch').bootstrapSwitch('state', true);
});

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


$('#TheCheckBox').on('switchChange.bootstrapSwitch', function () {
    $("#CheckBoxValue").text($('#TheCheckBox').bootstrapSwitch('state'));
});