56

I use this code 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/

6
  • 1
    Post the toggleWeather code here, or make a fiddle of the problem in jsfiddle.net Commented Sep 16, 2013 at 14:17
  • try $(document).on('click','#swWeather',function(){}); for the click event
    – V31
    Commented Sep 16, 2013 at 14:25
  • in which click event? Where I must put on it? Commented Sep 16, 2013 at 14:28
  • Seems to be proper , just binned it here : jsbin.com/IYuMuLI/1/edit Commented Sep 16, 2013 at 14:28
  • It works like this, but it looks standard checkbox, if it looks bootstraps switch, it does not work properly Commented Sep 16, 2013 at 14:45

11 Answers 11

104

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.

5
  • 3
    Just a note, but as of now, this still isn't fixed in the component or the documentation.
    – JonRed
    Commented Mar 23, 2014 at 1:17
  • 4
    Not fixed today either
    – dbinott
    Commented Sep 19, 2014 at 17:58
  • 1
    This should really be in the documentation. :D Commented Sep 24, 2014 at 2:44
  • 1
    How to reverse the state inside function (event, state) {}?? Commented May 6, 2019 at 10:40
  • This did not work for me, but the one below did. stackoverflow.com/a/39450925/4526479
    – Kyle Baker
    Commented Apr 26, 2020 at 5:41
34

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);
        }
    });
});
3
  • Works for me, but state is undefined. You get the value from e.target.checked which seems to be the proper way to get at it.
    – Jeff
    Commented Aug 30, 2017 at 18:10
  • Yes, aou're right, state is maybe not in use in this case. I'll remove it.
    – Meloman
    Commented Aug 31, 2017 at 6:54
  • 1
    It works fine for Bootstrap 4.3 https://getbootstrap.com/docs/4.3/components/forms/ for the code <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="customSwitch1"> <label class="custom-control-label" for="customSwitch1">Do it!</label> </div>
    – NoWar
    Commented Dec 6, 2019 at 6:14
11

This work for me.

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

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'));
});
0
8

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. [ 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/

2

Try this worked for me

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

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!!

1

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
               }
        });
1

After trying everything I was able to acheive it using a click event.

  $('#threshold_status').on('click', function (event, state) {
      if($(this).is(':checked')){
           //code if checked
      }
 }); 
0

this worked for while using bootstrapSwitch

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.