title: Onchange event in a bootstrap checkbox
body: <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>