Comment sélectionner un bouton radio par défaut ?
Par défaut ' vérifié ” L'attribut est utilisé pour sélectionner le bouton radio. Si cet attribut est utilisé sur plusieurs boutons radio, le bouton radio le plus récent est sélectionné par défaut. Suivez le blog étape par étape pour sélectionner le bouton radio par défaut :
Étape 1 : créer des boutons radio
Dans le fichier HTML, créez trois boutons radio et attachez-y des étiquettes :
< centre >
< h3 > Sélectionnez votre niveau d'expérience : < / h3 >
< div >
< saisir taper = 'radio' identifiant = 'débutant' nom = 'expérience' valeur = 'débutant' >
< étiqueter pour = 'débutant' > Débutant < / étiqueter >
< / div >
< div >
< saisir taper = 'radio' identifiant = 'intermédiaire' nom = 'expérience' valeur = 'intermédiaire' >
< étiqueter pour = 'intermédiaire' > Intermédiaire < / étiqueter >
< / div >
< div >
< saisir taper = 'radio' identifiant = 'avance' nom = 'expérience' valeur = 'avance' >
< étiqueter pour = 'avance' > Avance < / étiqueter >
< / div >
< / centre >
Dans l'extrait de code ci-dessus :
- Le bouton radio est formé en créant de simples '
' balises et en définissant son type sur ' radio ”. - Attribuez à chaque bouton radio le 'nom', 'id' et 'valeur'.
- À la fin, utilisez le ' identifiant ' du champ de saisie pour joindre le ' <étiquette> » tag en utilisant le « pour ' attribut.
Après avoir exécuté le script, la sortie ci-dessous :
La figure représente que les boutons radio sont affichés mais qu'aucun d'entre eux n'est sélectionné par défaut.
Étape 2 : Sélectionnez Par défaut
Le ' vérifié ” L'attribut est utilisé pour sélectionner automatiquement le bouton radio. Il ne sélectionne qu'une seule option. C'est pourquoi il est préférable de sélectionner un bouton radio par défaut. Il limite l'utilisateur à sélectionner la bonne option :
< div >
< saisir taper = 'radio' identifiant = 'débutant' nom = 'expérience' valeur = 'débutant' vérifié>
< étiqueter pour = 'débutant' >Débutant< / étiqueter >
< / div >
Dans le code ci-dessus, le vérifié L'attribut est utilisé et il est affecté au premier champ de saisie uniquement.
Maintenant, après avoir exécuté le code ci-dessus, la page Web ressemble à ceci :
La sortie montre que le premier bouton radio est sélectionné par défaut à chaque actualisation de la page.
Astuce bonus : Utiliser JavaScript pour sélectionner le bouton radio par défaut
Pour sélectionner un bouton radio par défaut à l'aide de JavaScript, accédez au bouton radio à l'aide de id. Ensuite, sélectionnez son attribut coché et définissez sa valeur booléenne sur 'true' comme dans le code ci-dessous :
< scénario >document.getElementById ( 'débutant' ) . vérifié = vrai;
< / scénario >
Dans ce code, le ' débutant ” est l'identifiant de ce bouton radio qui est sélectionné par défaut.
Après avoir compilé le script, la sortie ci-dessous :
Dans l'instantané ci-dessus, le premier bouton radio est sélectionné par défaut à l'aide de JavaScript.
Conclusion
Pour sélectionner un bouton radio, les utilisateurs peuvent utiliser le ' vérifié ' attribut. Si l'attribut coché est utilisé dans plus d'un bouton radio, le bouton radio obtient la valeur d'attribut « cochée » la plus récente. Pour sélectionner un bouton radio par défaut à l'aide de JavaScript, accédez au bouton radio à l'aide de id. Ce blog a démontré avec succès comment sélectionner le bouton radio par défaut.