CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapcheckbox
user2784250
user2784250

Reputation: 561

Bootstrap switch checked event?

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/

Upvotes: 56

Views: 129718

Answers (11)

Tabraiz Malik
Tabraiz Malik

Reputation: 126

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

Upvotes: 1

Heretic Sic
Heretic Sic

Reputation: 404

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

Upvotes: 0

Khaled Waleed
Khaled Waleed

Reputation: 11

this worked for while using bootstrapSwitch

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

Upvotes: 0

sergiu
sergiu

Reputation: 1509

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.

Upvotes: 105

PK-1825
PK-1825

Reputation: 1489

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

Upvotes: 1

Radames E. Hernandez
Radames E. Hernandez

Reputation: 4425

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

Upvotes: 2

Meloman
Meloman

Reputation: 3722

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

Upvotes: 34

felixmpa
felixmpa

Reputation: 2128

This work for me.

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

Upvotes: 11

Bruno Ribeiro
Bruno Ribeiro

Reputation: 1411

Try this worked for me

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

Upvotes: 2

Skindeep2366
Skindeep2366

Reputation: 1559

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

Upvotes: 9

user2680900
user2680900

Reputation: 171

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/

Upvotes: 8

Related Questions