Obtenez la valeur d'un bouton radio bootstrap Twitter. JQuery

Comme la balise dit que c'est un button , pour cela, vous devriez faire ce qu'il suggère, et travailler avec ces boutons … voici un exemple simple:

 <input type="hidden" id="alignment" value="" /> <div class="btn-group alignment" data-toggle="buttons-checkbox"> <button type="button" class="btn">Left</button> <button type="button" class="btn">Middle</button> <button type="button" class="btn">Right</button> </div> 

Maintenant jQuery:

 $(".alignment .btn").click(function() { // whenever a button is clicked, set the hidden helper $("#alignment").val($(this).text()); }); 

Lorsque vous soumettez, vous trouverez la valeur dans le champ caché de l' alignment .

Voici un exemple de base: http://jsbin.com/oveniw/1/

Une bonne chose à prendre en considération est que sur un clic, l'élément change et bootstrap ajoute un nom de classe active au bouton cliqué.

Vous pouvez toujours utiliser cela pour changer le hidden field , mais je continuerais à faire mon exemple si je voulais soumettre le formulaire lui-même.

Vous pouvez "vérifier" un bouton en configurant sa classe sur 'active':

 <div class="btn-group" data-toggle="buttons-checkbox"> <button type="button" class="btn">Left</button> <button type="button" class="btn active">Middle</button> <button type="button" class="btn">Right</button> </div> 

Pour obtenir une valeur, vous devriez avoir une "valeur" des données, telles que:

 <div class="btn-group" data-toggle="buttons-checkbox" id="my_radiogroup"> <button type="button" class="btn" data-value="0">Left</button> <button type="button" class="btn active" data-value="1">Middle</button> <button type="button" class="btn" data-value="2">Right</button> </div> 

De cette façon, vous pouvez obtenir la valeur via:

 $("#my_radiogroup .active").data("value"); >>> 1 (but may, of course, be undefined if no button is checked) 

Mais gardez à l'esprit que la valeur ne sera pas affichée dans votre formulaire, sauf si vous avez un <input type=hidden> pour stocker réellement les données sélectionnées.

Il n'y a aucune raison de rendre cela compliqué.

Dire que vous avez un groupe de boutons, pour choisir si quelque chose est actif ou inactif … comme ça …

 <div class="btn-group" data-toggle="buttons-radio"> <button type="button" class="productStatus btn btn-success" value="1">Yes</button> <button type="button" class="productStatus btn btn-danger" value="0">No</button> </div> 

Lorsque vous exécutez une fonction ou n'importe quoi pour rassembler votre bouton sélectionné, vous exécuteriez cette commande … ce qui vous donnerait la valeur de votre bouton radio sélectionné. Lorsque vous cliquez sur un bouton, ou plus au point, lorsqu'il est "vérifié", il est donné la classe de "actif" comme dans les réponses précédentes. C'est tout ce que vous devez vraiment rechercher. Avec ce petit extrait ci-dessous.

 var active = $('.productStatus[class*="active"]').val(); alert(active); 

Fondamentalement, il utilise un sélecteur de caractères génériques à la recherche de cette classe de bouton "produitStatus", puis renvoie la valeur du bouton qui a la classe "active".

J'utilise ce crochet lorsque plusieurs boutons radio Bootstrap ont plus d'un

 $('div[data-toggle="buttons-radio"] .btn').click(function(){ $('input[name="' + $(this).parent().attr('id') + '"]').val($(this).val()); }); 

Et en HTML:

 <div class="btn-group" id="rental" data-toggle="buttons-radio"> <button type="button" class="btn" value="0">Sale</button> <button type="button" class="btn" value="1">Rent</button> </div> <input type="hidden" name="rental" value="0"> 

Vous pouvez obtenir la sélection comme suit:

 $('.btn-group button.btn.active') 

To, activez un bouton actif

 $(selector).addClass('active') 

Par exemple, si vous souhaitez définir le premier bouton actif:

 $('.btn-group button.btn:eq(0)').addClass('active') 

Vous pouvez vérifier la valeur du bouton radio lors de la soumission du formulaire dans une fonction ou un clic sur l'événement du bouton de soumission

 alert($('.btn-group > .btn.active').attr("value"));