web-dev-qa-db-fra.com

Bootstrap "coché")

Dans le cas n ° 1, dans le cas n ° 2, cela ne fonctionne pas. Vérifiez le code ci-dessous:

<div class="container">
    <div class="row">
        <h1>Radio Group #1</h1>
        <label class="radio-inline">
          <input name="radioGroup" id="radio1" value="option1" type="radio"> 1
        </label>
        <label class="radio-inline">
          <input name="radioGroup" id="radio2" value="option2" checked="checked" type="radio"> 2
        </label>
        <label class="radio-inline">
          <input name="radioGroup" id="radio3" value="option3" type="radio"> 3
        </label>
    </div>
    <div class="row">
        <h1>Radio Group #2</h1>
        <label for="year" class="control-label input-group">Year</label>
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-default">
                <input name="year" value="2011" type="radio">2011
            </label>
            <label class="btn btn-default">
                <input name="year" value="2012" type="radio">2012
            </label>
            <label class="btn btn-default">
                <input name="year" value="2013" checked="checked" type="radio">2013
            </label>
        </div>  
    </div>  
</div>

Vous pouvez le voir en action ici: http://bootply.com/84165

htmltwitter-bootstrapradio-button
40
Khrys

En supposant que vous souhaitiez un bouton par défaut coché.

<div class="row">
    <h1>Radio Group #2</h1>
    <label for="year" class="control-label input-group">Year</label>
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default">
            <input type="radio" name="year" value="2011">2011
        </label>
        <label class="btn btn-default">
            <input type="radio" name="year" value="2012">2012
        </label>
        <label class="btn btn-default active">
            <input type="radio" name="year" value="2013" checked="">2013
        </label>
    </div>
  </div>

Ajoutez la classe active au bouton (balise label que vous voulez utiliser par défaut et checked="" à sa balise input afin qu’elle soit soumise par défaut dans le formulaire.

77
Trevor

Un correctif javascript pour appliquer la classe 'active' à toutes les étiquettes parent des entrées vérifiées:

$(':input:checked').parent('.btn').addClass('active');

insérer juste après

$('.btn').button();
14
rawrkats

Vous devez utiliser active dans l’étiquette pour que cela fonctionne comme indiqué ci-dessus. Mais vous pouvez utiliser vérifié = "vérifié" et cela fonctionnera aussi. Ce n'est pas nécessaire, mais c'est plus lisible et plus logique car c'est plus conforme au format HTML.

2
Gi1ber7

Utilisez active classe avec label pour le sélectionner et utiliser automatiquement checked="".

   <label class="btn btn-primary  active" value="regular"  style="width:47%">
   <input  type="radio" name="service" checked=""  > Regular </label>
   <label class="btn btn-primary " value="express" style="width:46%">
   <input type="radio" name="service"> Express </label>
1
Cyclotron3x3