Onchange event in a bootstrap checkbox
<p>I am trying to intercept and handle changes in a bootstrap checkbox and I have added an 'onchange' event. Unfortunately, I was not successful. Currently, I have a button which can change the state of the checkbox and this is working.</p>

<p>Any hint would be much appreciated.</p>

<pre><code>    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;title&gt;Bootstrap Toggle&lt;/title&gt;
    &lt;link href="./css/github.min.css" rel="stylesheet"&gt;
    &lt;link href="./css/bootstrap.min.css" rel="stylesheet"&gt;
    &lt;link href="./font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet"&gt;
    &lt;link href="./css/bootstrap-toggle.css" rel="stylesheet"&gt;
    &lt;link href="./css/stylesheet.css" rel="stylesheet"&gt;
    &lt;script src="./js/jquery-2.1.3.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/bootstrap-toggle.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;div id="events" class="container"&gt;
    &lt;h3&gt;API vs Input&lt;/h3&gt;
    &lt;p&gt;This also means that using the API or Input to trigger events will work both ways.&lt;/p&gt;
    &lt;div class="example"&gt;           
    &lt;input id="chk1" type="checkbox" data-toggle="toggle" onchange="fonctionTest()"&gt;                
    &lt;input id="chk2" type="checkbox" data-toggle="toggle"&gt;
    &lt;input id="chk3" type="checkbox" data-toggle="toggle"&gt;
    &lt;input id="chk4" type="checkbox" data-toggle="toggle"&gt;          
    &lt;button class="btn btn-success" onclick="toggleOnOff('#chk1','on')"&gt;On by API&lt;/button&gt;
    &lt;button class="btn btn-danger" onclick="toggleOnOff('#chk1','off')"&gt;Off by API&lt;/button&gt;
&lt;div id="console-event"&gt;&lt;/div&gt;
&lt;script&gt;
$(function() {
$('input:checkbox').change(function() {
$('#console-event').html('Toggle: ' + $(this).prop('checked'))
})
})
&lt;/script&gt;
    &lt;script&gt;        
        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);
                }   
            &lt;/script&gt;
        &lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>