web-dev-qa-db-fra.com

Commutateur bootstrap vérifié événement?

J'utilise ces codes pour les événements cochés, mais cela ne fonctionne pas.

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>

Si j'utilise cette méthode, le style visuel fonctionne bien mais il ne déclenche pas la fonction toggleWeather(), mais si je supprime bootstrap-switch.js, tous les styles visuels sont supprimés et ont l'air standard dans les cases à cocher standard, bien que cela fonctionne très bien.

Comment puis-je changer le statut de case à cocher cochée cliquez dessus avec bootstrap-switch?

Voici mon code toggleweather:

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

en passant, j'utilise ces commutateurs avec ce thème: http://www.keenthemes.com/preview/metronic_admin/form_component.html#myModal

Ce n'est pas un bon exemple, mais comme ça http://jsfiddle.net/UHkN6/

javascriptjquerycsstwitter-bootstrapcheckbox
29
user2784250

Remarque: Le bootstrap docs utilise maintenant le deuxième exemple.

Pour la version candidate de bootstrap-switch 3.0, l'événement donné précédemment à titre d'exemple sur la page officielle était:

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

Il ne se fait pas virer!

Solution - utilisez ceci à la place: 

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

où state paramètre est la valeur de checkbox.

68
sergiu

Pour moi, c'était le seul code qui fonctionnait (Bootstrap 3.0):

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

Il me retournevraioufaux

Exemple avec la soumission Ajax sur le changement de commutateur d'amorçage:

$('#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);
        }
    });
});
13
Meloman

Vous devriez appeler la fonction de changement de commutateur comme ci-dessous 

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

Si vous envisagez de le créer dynamiquement, suivez les étapes indiquées dans le lien que j'ai déjà posté. [ créer un commutateur radio de démarrage dynamiquement ]

Ceci est pour le type radio. Pour le type de case à cocher, vous pouvez modifier le type='checkbox'.

Vous pouvez vous référer au lien ci-dessous pour plus d'exemples - http://www.bootstrap-switch.org/

8
user2680900

La documentation fournit les événements pour le commutateur de démarrage. Mais ici est un exemple qui utilise une case à cocher unique ainsi qu’un groupe de radios juste pour être complet. J'ai également jeté dans la méthode Disable aussi bien. 

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

Ce travail pour moi.

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

Essayez cela a fonctionné pour moi

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

C'est la façon dont je l'utilise:

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

J'espère que c'est utile !!

0
Radames E. Hernandez

essaye ça

<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
               }
        });
0
PK-1825