web-dev-qa-db-fra.com

Comment obtenir la valeur d'un bouton à bascule Bootstrap dans jQuery

J'ai ce balisage et jQuery mais je ne peux pas capturer avec succès la valeur du bouton ou activer/désactiver ou toute forme de reconnaissance du paramètre de la bascule:

[~ # ~] html [~ # ~] 

<div class="form-group">
    <label class="col-md-2 control-label" for="payMethod">Payment Method</label>
      <div class="col-md-2">
        <label class="checkbox-inline bootstrap-switch-noPad" for="payMethod">
          <input type="checkbox" id="payMethod" name="payMethod" data-size="small" value="Credit" data-on-text="Credit" data-on-color="success" data-off-text="Cash" data-off-color="warning" tabindex="13">
        </label>
      </div>
  </div>

jQuery 

$('#payMethod').on( 'change', function() {
  alert('slid');
}); // does not work

$( "#payMethod" ).click(function() {
  alert( $('#payMethod').val() );
}); // does not work

$('#payMethod').change(function() {
  alert('Toggle: ' + $(this).prop('checked'));
}); // does not work

$('input[type=checkbox][name=payMethod]').change(function() {
  alert('help'); // does not work
});

Voici les boutons du curseur (il n'y a pas de case à cocher): enter image description hereenter image description here

jquerycheckboxtwitter-bootstrap-3toggle
16
H. Ferrence

tu peux essayer ça

$("#payMethod").change(function(){
    if($(this).prop("checked") == true){
       //run code
    }else{
       //run code
    }
});
20
Makubex

Vous pouvez utiliser simple comme ceci: Si dans votre code html vous utilisez id = abc pour bootstrap toggle.

$('#abc').prop('checked')

La sortie est: vraie ou fausse. (Vrai lorsque le basculement est activé et faux lorsque le basculement est désactivé)

7
ThienSuBS

Je suppose que le script placé avant la balise HTML? Si c'est le cas, déplacez le script après la balise Html ou placez le script dans la fonction jQuery comme ci-dessous:

$(function()
{

    $('#payMethod').on( 'change', function() {
         alert('slid');
    }); // does not work

    $( "#payMethod" ).click(function() {
         alert( $('#payMethod').val() );
    }); // does not work

    $('#payMethod').change(function() {
        alert('Toggle: ' + $(this).prop('checked'));
    }); // does not work

    $('input[type=checkbox][name=payMethod]').change(function() {
        alert('help'); // does not work
    });
});

La meilleure pratique consiste à utiliser la dernière, qui place le script dans la fonction jQuery. Parce que les scripts seront rendus après le rendu de toutes les balises HTML.

2
Oetawan Arya Chandra