Attribuer une valeur initiale au bouton radio comme coché


Réponses:


164

Vous pouvez utiliser l' checkedattribut pour cela:

<input type="radio" checked="checked">

11
vous pouvez également simplement mentionner cet attribut sans valeur attribuée, c'est-à-dire <input type = "radio" checked>
niksvp

1
@niksvp Je crois que vérifié = "vérifié" est le moyen valide de pré-vérifier un bouton radio - le simple fait d'utiliser "vérifié" n'est pas un HTML valide (bien qu'il soit pris en charge par la plupart des navigateurs)
Matt Healy

9
@matthewh - non, vous pouvez simplement utiliser "vérifié" seul et c'est du HTML valide (bien que du XHTML non valide). Personnellement, je préfère 'vérifié = "vérifié"', mais vous n'êtes pas obligé de l'utiliser ... en effet, il y a un argument assez fort contre son utilisation.
Algy Taylor

55

Vous pouvez simplement utiliser:

<input type="radio" checked />

Utiliser uniquement l'attribut vérifié sans indiquer de valeur équivaut à checked="checked".


comme @Matt Healey l'a déclaré, utiliser vérifié sans l'attribut n'est pas valide HTML
salvob

16
@salvob incorrect. ce n'est pas du html X valide , mais il est tout à fait valable pour HTML5 qui est aussi global d'un standard que n'importe quoi.
Chris Marisic le

14

J'ai mis cette réponse sur une question similaire qui a été marquée comme un double de cette question. La réponse a aidé un nombre décent de personnes, alors j'ai pensé l'ajouter ici aussi au cas où.

Cela ne répond pas exactement à la question, mais pour toute personne utilisant AngularJS essayant d'y parvenir, la réponse est légèrement différente. Et en fait, la réponse normale ne fonctionnera pas (du moins pour moi).

Votre html ressemblera assez au bouton radio normal:

<input type='radio' name='group' ng-model='mValue' value='first' />First
<input type='radio' name='group' ng-model='mValue' value='second' /> Second

Dans votre contrôleur, vous aurez déclaré le mValuequi est associé aux boutons radio. Pour que l'un de ces boutons radio soit présélectionné, affectez la $scopevariable associée au groupe à la valeur d'entrée souhaitée:

$scope.mValue="second"

Cela rend le "deuxième" bouton radio sélectionné lors du chargement de la page.


En effet! Les réponses ci-dessus ne fonctionnent pas avec Angular JS. Votre réponse a résolu mon problème. Merci! :)
Mitaksh Gupta

3

Pour tous ceux qui recherchent une solution Angular2 (2.4.8), car il s'agit d'une question génériquement populaire lors de la recherche:

<div *ngFor="let choice of choices">
  <input type="radio" [checked]="choice == defaultChoice">
</div>

Cela ajoutera l' checkedattribut à l'entrée étant donné la condition, mais n'ajoutera rien si la condition échoue.

Ne faites pas ceci:

[attr.checked]="choice == defaultChoice"

car cela ajoutera l'attribut checked="false"à tous les autres éléments d'entrée.

Comme le navigateur ne recherche que la présence de l' checkedattribut (la clé ), en ignorant sa valeur, la dernière entrée du groupe sera vérifiée.


2

L'autre façon de définir le paramètre par défaut coché sur les boutons radio, en particulier si vous utilisez angularjs, consiste à définir l'indicateur 'ng-checked' sur "true", par exemple: <input id="d_man" value="M" ng-disabled="some Value" type="radio" ng-checked="true">Man

le vérifié = "vérifié" n'a pas fonctionné pour moi ..


la cause ng-checked="true"est du répertoire angularjs.
Augustas

Ou définissez la valeur du modèle dans le contrôleur sur "true". Faites attention que vous le définissez sur une chaîne, pas sur un booléen!
Thomas David Kehoe

2

Notez que si vous avez deux boutons radio avec le même attribut "nom" et qu'ils ont un attribut "obligatoire", alors leur ajouter un attribut "vérifié" ne les fera pas cocher.

Exemple: Cela rend les deux boutons radio non cochés.

<input type="radio" name="gender" value="male" required <?php echo "checked"; ?>/>
<input type="radio" name="gender" value="female" required />

Cela rendra le bouton radio "masculin" coché.

<input type="radio" name="gender" value="male" <?php echo "checked"; ?>/>
<input type="radio" name="gender" value="female" />

1

Je suis un peu en retard à la fête et je sais que l'OP a dit html, mais si vous avez besoin de le faire dans MVC, vous pouvez définir truele troisième paramètre.

par exemple:

    <p>Option One :@Html.RadioButton("options", "option1", true})</p>
    // true will set it checked

     <p>Option Two :@Html.RadioButton("options", "option2"})</p>
     //nothing will leave it unchecked

0

Si vous utilisez react-redux pour votre application et si vous voulez afficher les données qui se trouvent dans le magasin redux, vous pouvez définir l'option "cochée" comme ci-dessous.

<label>Male</label>

 <input
   type="radio"
   name="gender"
   defaultChecked={this.props.gender == "0"}
 />



 <label>Female</label>
 <input
   type="radio"
   name="gender"
   defaultChecked={this.props.gender == "1"}
 />
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.