Bootstrap switch checked event?

Question

I use this codes for checkbox checked event but it does not work.

css

<link href="assets/plugins/bootstrap-switch/static/stylesheets/bootstrap-switch-metro.css" rel="stylesheet" type="text/css" /> 

html

<div class="switch switch-mini" data-on-label="<i class='icon-sun icon-white'></i>" data-off-label="<i class='icon-sun muted'></i>">     <input id="swWeather" type="checkbox" class="toggle" onclick="toggleWeather()" /> </div> 

js

<script src="assets/plugins/bootstrap-switch/static/js/bootstrap-switch.js" type="text/javascript"></script> 

If I use this way, just visual style work well but it does not trigger toggleWeather() function, but if I remove bootstrap-switch.js, all visual styles are removed and looks standard as standard checkbox, although it works very well.

How can I change checkbox checked status click it with bootstrap-switch?

Here my toggleweather code:

function toggleWeather() {              if (document.getElementById('swWeather').checked)              { weatherLayer.setMap(map); }              else              { weatherLayer.setMap(null); }              if (document.getElementById('swCloud').checked)              { cloudLayer.setMap(map); }              else              { cloudLayer.setMap(null); }         } 

by the way I use these switches with this theme: http://www.keenthemes.com/preview/metronic_admin/form_component.html#myModal

It is not good example but like that http://jsfiddle.net/UHkN6/

Answer 1

Note: The bootstrap docs now use the second example.

For bootstrap-switch 3.0 release candidate the event previously given as an example on the official page was:

$('#switch-change').on('switchChange', function (e, data) {});  

It doesn't get fired!

Solution - use this instead :

$('#switch-change').on('switchChange.bootstrapSwitch', function (event, state) {});  

where state parameter is the value of the checkbox.