Attribuer une valeur initiale au bouton radio comme coché

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

Vous pouvez utiliser l' checkedattribut pour cela:

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

Vous pouvez simplement utiliser:

<input type="radio" checked />

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

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.

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.

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 ..

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" />

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

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"}
 />