Bootstrap switch checked event?

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/

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.

For me this was the only working code (Bootstrap 3.0) :

$('#my_checkbox').on('change.bootstrapSwitch', function(e) {
	console.log(e.target.checked);
});

It returns me true or false

Example with Ajax submission on bootstrap switch change :

$('#my_checkbox').on('change.bootstrapSwitch', function(e) {
	$.ajax({
		method: 'POST',
		url: '/uri/of/your/page',
		data: {
			'my_checkbox_value': e.target.checked
		},
		dataType: 'json',
		success: function(data){
			console.log(data);
		}
	});
});

This work for me.

$(".switch").bootstrapSwitch({
		'size': 'mini',
		'onSwitchChange': function(event, state){
			console.log('switched...')
		},
        'AnotherName':'AnotherValue'
	});

You should call the switch-change function like below

$('.switch').on('switch-change', function () {
    console.log("inside switchchange");
    toggleWeather();
});

If you are seeing to create it dynamically, follow the steps given in the link which was previously posted by me. [ https://stackoverflow.com/questions/19291929/create-a-radio-bootstrap-switch-dynamically ]

This is for radio type. For checkbox type you can change the type='checkbox'.

You can refer to the below link for more examples - http://www.bootstrap-switch.org/

The documentation provides the events for the bootstrap-switch. But here is an example that uses a single checkbox as well as a radio group just for completeness. I have also thrown in the Disable method as well.

$('#TheCheckBox').on('switchChange.bootstrapSwitch', function () {
   $("#CheckBoxValue").text($('#TheCheckBox').bootstrapSwitch('state'));
});

Try this worked for me

 $('#check').change(function (event) {
    var state = $(this).bootstrapSwitch('state');
    if (state) {
       // true
    } else {
       // false
    }
    event.preventDefault();
});

This is the way that I use it:

HTMl:

<input name="field_name" class="switcher" type="checkbox" data-size="small" value="1">

JQuery:

$('.switcher').on('switchChange.bootstrapSwitch', function(event, state) {
    if (state)
    {
		// Checked
    }else
    {
		// Is not checked
    }
});

I hope it is helpful!!

try this

<input type="checkbox" name="my-checkbox" checked>
    
    $('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function (event, state) 
        {
              if (state == true) 
               {
                 //your code
               }
               else
               {
                  //your code
               }
        });

this worked for while using bootstrapSwitch

    $('body').on('switchChange.bootstrapSwitch','.switch',function () {
        alert('Done')
    });

It's just a stylized checkbox. So you can work with it in the same way as with checkboxes

document.addEventListener('change', function() {
    var chk = event.target
    if (chk.tagName === 'INPUT' && chk.type === 'checkbox') {
        console.log(chk.checked)
    }
})

This example is designed for 2 positions of the switch, in response you will get true or false-depending on the position of the checkbox