web-dev-qa-db-fra.com

Bouton radio Bootstrap: Obtenir la valeur sélectionnée sur le formulaire de soumission

J'ai le prochain bouton radio boostrap:

<div class="btn-group" id="filterDay" data-toggle="buttons">
       <label class="btn btn-default blue">
         <input type="radio" class="toggle" value="1">Monday
       </label>
       <label class="btn btn-default blue">
         <input type="radio" class="toggle" value="2"> Tuesday
       </label>
       <label class="btn btn-default blue">
         <input type="radio" class="toggle" value="3"> Wednesday
       </label>
       <label class="btn btn-default blue">
         <input type="radio" class="toggle" value="4"> Thursday
       </label>
       <label class="btn btn-default blue">
          <input type="radio" class="toggle" value="5"> Friday
       </label>
       <label class="btn btn-default blue">
           <input type="radio" class="toggle" value="6"> Saturday
        </label>
       <label class="btn btn-default blue active">
           <input type="radio" class="toggle" value="0"> Sunday
       </label>
</div>

J'essaie d'obtenir la valeur du bouton actif lorsque je soumets le formulaire, sans créer d'événement "onclick", mais en obtenant simplement le bouton actif du groupe de boutons $ ('# filterDay'). Cela devrait être facile, mais je ne trouve pas le moyen d’obtenir la valeur. J'ai essayé plusieurs exemples mais tous ont fonctionné.

Quelqu'un pourrait aider?

Je vous remercie!

Mettre à jour:

Ceci est le code "imprimé" html:

<label class="btn btn-default blue">
   <input type="radio" class="toggle" value="6"> Saturday
</label>    
<label class="btn btn-default blue active">
        <input type="radio" class="toggle" value="0"> Sunday
</label>

Le "actif" dans la classe est ce qui change lorsque je clique sur le bouton.

javascriptjqueryhtmltwitter-bootstrap
16
Oscar Mateu

Dans le gestionnaire de soumission de formulaire, utilisez le sélecteur : vérifié

var filterDay = $('#filterDay input:radio:checked').val()
28
Arun P Johny

Essayez ceci, .__, cela devrait résoudre votre problème.

$( "input:checked" ).val()

vous pouvez vous référer au lien ci-dessous pour plus de détails:
http://api.jquery.com/checked-selector/

2
user3292306

Vous devez définir un "nom" commun pour identifier le formulaire:

<div class="btn-group" id="filterDay" data-toggle="buttons">
   <label class="btn btn-default blue">
     <input type="radio" class="toggle" name="toggle" value="1">Monday
   </label>
   <label class="btn btn-default blue">
     <input type="radio" class="toggle" name="toggle" value="2"> Tuesday
   </label>
   <label class="btn btn-default blue">
     <input type="radio" class="toggle" name="toggle" value="3"> Wednesday
   </label>
   <label class="btn btn-default blue">
     <input type="radio" class="toggle" name="toggle" value="4"> Thursday
   </label>
   <label class="btn btn-default blue">
      <input type="radio" class="toggle" name="toggle" value="5"> Friday
   </label>
   <label class="btn btn-default blue">
       <input type="radio" class="toggle" name="toggle" value="6"> Saturday
    </label>
   <label class="btn btn-default blue active">
       <input type="radio" class="toggle" name="toggle" value="0"> Sunday
   </label>
</div>

Et pour obtenir la valeur, vous pouvez obtenir comme ceci:

$('input[name=toggle]:checked').val()
1
afranco

Un problème de logique dans le code ...

<label class="btn btn-default blue active">
       <input type="radio" class="toggle" value="0"> Sunday
</label>

Label a la classe active, donc bootstrap l'affichera comme étant active, mais la radio d'entrée contenue n'est pas cochée, donc en HTML pur, elle n'est pas cochée.

Code correct ...

<label class="btn btn-default blue active">
       <input type="radio" checked="checked" class="toggle" value="0"> Sunday
</label>
0
davidmars