<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/djibe/bootstrap-switch/dist/js/bootstrap-switch.min.js"></script> <link href="https://cdn.jsdelivr.net/gh/djibe/bootstrap-switch@6a41c824782c514fd5e09b6683f852a9c9b2a997/dist/css/bootstrap4/bootstrap-switch.min.css" rel="stylesheet" /> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait"> <div class="container" style="font-family: 'Strait', sans-serif;"> <div class="row"> <h2>Various color switches using checkboxes</h2> </div><input type="checkbox" name="my-checkbox" checked> <br><br> <div class="well" id="sonuc" >.</div> <div class="col-sm-6 col-lg-4"> <h2 class="h4">A demo of using custom text</h2> <p> <input id="bootswitch-text1" type="checkbox" name="my-checkbox" data-on-color="success" data-off-color="danger" data-on-text="<i class='fa fa-eye'></i> " data-off-text="<i class='fa fa-eye-slash'></i>"> </p> <p> <input id="bootswitch-text2" type="checkbox" name="my-checkbox" data-on-color="success" data-off-color="danger" data-on-text="Gizle" data-off-text="Göster"> </p> <p> <input id="bootswitch-text3" type="checkbox" name="my-checkbox" data-on-color="info" data-off-color="success" data-on-text="Göster" data-off-text="Gizle"> </p> </div> </div>

$(document).ready(function () { $("[name='my-checkbox']").bootstrapSwitch({ html: true }); $("[name='my-checkbox']").on('switchChange.bootstrapSwitch', function(event, state) { var sonuca = event.target.checked; $("#sonuc").text(sonuca); $(this).attr('data-switch-value', event.target.checked); }); });