web-dev-qa-db-fra.com

Attribuer une valeur initiale au bouton radio comme coché

Comment attribuer la valeur d'un bouton radio initialement cochée en HTML?

htmlradio-button
118
Rinkal Bhanderi

Vous pouvez utiliser l'attribut checked pour ceci:

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

Vous pouvez simplement utiliser:

<input type="radio" checked />

Utiliser uniquement l'attribut coché sans indiquer de valeur est identique à checked="checked".

50
seedg

J'ai mis cette réponse sur une question similaire qui a été marquée comme un doublon de cette question. La réponse a aidé un nombre décent de personnes, alors je me suis dit que je l’ajouterais ici au cas où. 

Cela ne répond pas exactement à la question, mais pour ceux qui utilisent AngularJS pour y parvenir, la réponse est légèrement différente. Et en réalité, la réponse normale ne fonctionnera pas (du moins cela ne m’a pas été pour moi).

Votre code HTML ressemblera beaucoup 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é la mValue associée aux boutons radio. Pour que l'un de ces boutons radio soit présélectionné, affectez la variable $scope associée au groupe à la valeur de l'entrée souhaitée:

$scope.mValue="second"

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

12
discodane

Pour tous ceux qui recherchent une solution Angular2 (2.4.8), puisqu'il s'agit d'une question très populaire lors de la recherche:

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

Cela ajoutera l’attribut checked à l’entrée donnée à la condition, mais n’ajoutera rien si la condition échoue.

Ne pas faire ceci:

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

car cela ajoutera l'attribut checked="false" à chaque autre élément d'entrée.

Puisque le navigateur recherche uniquement la présence de l'attribut checked (la clé), en ignorant sa valeur, la dernière entrée du groupe sera vérifiée.

2
msanford

L’autre façon de définir les cases à cocher cochées par défaut sur les boutons radio, en particulier si vous utilisez angularjs, consiste à définir le drapeau «coché» sur «true» 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 ..

1
Deepika Pethaperumal

Notez que si vous avez deux boutons radio avec le même attribut "name" et qu'ils ont l'attribut "obligatoire", l'ajout de l'attribut "vérifié" ne les fera pas cocher.

Exemple: Cela fait que les deux boutons radio ne sont pas cochés.

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

Cela rend le bouton radio "masculin" coché.

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

Je suis un peu en retard pour la fête et je sais que l'OP a dit html, mais si vous deviez le faire dans MVC, vous pouvez définir true dans le 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
user2903379

Si vous utilisez react-redux pour votre application et si vous souhaitez afficher les données qui se trouvent dans le magasin Redux, vous pouvez définir l'option "cochée" comme indiqué 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"}
 />
0
Ruks