Geek Answers Handbook

Onchange event in botstrag

I am trying to intercept and process changes in the botstragg, and I have added the "onchange" event. Unfortunately, I did not succeed. I currently have a button that can change the state of the checkbox, and this works.

Any hints would be greatly appreciated.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Toggle</title> <link href="./css/github.min.css" rel="stylesheet"> <link href="./css/bootstrap.min.css" rel="stylesheet"> <link href="./font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet"> <link href="./css/bootstrap-toggle.css" rel="stylesheet"> <link href="./css/stylesheet.css" rel="stylesheet"> <script src="./js/jquery-2.1.3.min.js"></script> <script src="js/bootstrap-toggle.js"></script> </head> <body> <div id="events" class="container"> <h3>API vs Input</h3> <p>This also means that using the API or Input to trigger events will work both ways.</p> <div class="example"> <input id="chk1" type="checkbox" data-toggle="toggle" onchange="fonctionTest()"> <input id="chk2" type="checkbox" data-toggle="toggle"> <input id="chk3" type="checkbox" data-toggle="toggle"> <input id="chk4" type="checkbox" data-toggle="toggle"> <button class="btn btn-success" onclick="toggleOnOff('#chk1','on')">On by API</button> <button class="btn btn-danger" onclick="toggleOnOff('#chk1','off')">Off by API</button> <div id="console-event"></div> <script> $(function() { $('input:checkbox').change(function() { $('#console-event').html('Toggle: ' + $(this).prop('checked')) }) }) </script> <script> function fonctionTest(){ console.log("This is a test"); } function toggleOnOff(selector,state){ console.log("element : " + selector); console.log($(selector).prop('checked')); $(selector).bootstrapToggle(state); } function toggleOn() { $('#chk1').bootstrapToggle('on'); isOnOrOff(); } function toggleOff() { $('#chk1').bootstrapToggle('off'); isOnOrOff(); } function isOnOrOff(){ var c=document.getElementById('chk1'); console.log(c.checked); } </script> </div> </body> </html>
+5
source share
3 answers

The documentation says use jQuery to change .

Demo

 $('#chk1').change(function() { alert($(this).prop('checked')) }) 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script> <link href="https://gitcdn.imtqy.com/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"> <script src="https://gitcdn.imtqy.com/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script> <input id="chk1" type="checkbox" checked data-toggle="toggle">
+8
source

Works for all checkboxes, as shown in the following examples:

 $('input:checkbox').change(function() { $('#console-event').html('Toggle: ' + $(this).prop('checked')); console.log("Change event: " + this.id); }) 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script> <link href="https://gitcdn.imtqy.com/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"> <script src="https://gitcdn.imtqy.com/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script> <input id="chk1" type="checkbox" data-toggle="toggle"> <input id="chk2" type="checkbox" data-toggle="toggle"> <input id="chk3" type="checkbox" data-toggle="toggle"> <input id="chk4" type="checkbox" data-toggle="toggle"> <div id="console-event"></div>

EDIT:

Add code as:

 <script> $(function() { $('input:checkbox').change(function() { $('#console-event').html('Toggle: ' + $(this).prop('checked')) }) }) </script>
+2
source 
 <input id="chk1" type="checkbox" data-toggle="toggle" onclick="fonctionTest()"> function fonctionTest(){ if (document.getElementById('chk1').checked) { alert("Checked") } else { alert("Not Checked") } }
0
source

More articles:


All Articles