Bootstrap switch checked event?

Question

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

css

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

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

Answer 3

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

Answer 4

Try this worked for me

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

Answer 5

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

Answer 6

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/