Un bouton radio est une icône utilisée dans les formulaires pour recueillir les commentaires de l'utilisateur. Il permet aux utilisateurs de choisir une valeur dans le groupe de boutons radio. Les boutons radio sont essentiellement utilisés pour le sélection unique parmi plusieurs , qui est principalement utilisé dans les formulaires GUI.

Vous ne pouvez cocher/cocher qu’un seul bouton radio entre deux ou plusieurs boutons radio. Dans ce chapitre, nous vous expliquerons comment cocher un bouton radio à l'aide du Langage de programmation JavaScript .

Pour cela, nous concevons d'abord un formulaire contenant la radio boutons en utilisant HTML, puis nous utiliserons la programmation JavaScript pour cocher le bouton radio. Nous vérifierons également quelle valeur de bouton radio est sélectionnée.

Créer un bouton radio

Voici un code simple pour créer un groupe de boutons radio.

Copier le code

Diana Ankudinova

Choisissez votre saison préférée :

Cocher un bouton radio

Nous n'avons pas besoin d'écrire de code spécifique pour cocher le bouton radio. Ils peuvent être vérifiés une fois créés ou spécifiés sous forme HTML.

Cependant, nous devons écrire le code JavaScript pour obtenir la valeur du bouton radio coché, ce que nous verrons dans le chapitre ci-dessous :

Vérifiez que le bouton radio est sélectionné ou non

Il existe deux manières en JavaScript de vérifier le bouton radio marqué ou d'identifier quel bouton radio est sélectionné. JavaScript propose deux méthodes DOM pour cela.

getElementById sélecteur de requête

La propriété d'entrée radio vérifiée est utilisée pour vérifier si la case à cocher est sélectionnée ou non. Utiliser document.getElementById('id').checked méthode pour cela. Il renverra l’état coché du bouton radio sous forme de valeur booléenne. Cela peut être vrai ou faux.

Vrai - Si le bouton radio est sélectionné.

FAUX - Si le bouton radio n’est pas sélectionné/coché.

Consultez le code JavaScript ci-dessous pour savoir comment cela fonctionne :

Exemple

Par exemple, nous avons un bouton radio nommé Summer et id = 'summer'. Maintenant, nous allons vérifier à l'aide de cet identifiant de bouton que le bouton radio est marqué ou non.

Copier le code

 if(document.getElementById('summer').checked == true) { document.write('Summer radio button is selected'); } else { document.write('Summer radio button is not selected'); } 

sélecteur de requête()

La fonction querySelector() est une méthode DOM de JavaScript. Il utilise la propriété de nom commun des boutons radio qu'il contient. Cette méthode est utilisée comme indiqué ci-dessous pour vérifier quel bouton radio est sélectionné.

 document.querySelector('input[name='JTP']:checked') 

Exemple

Par exemple, nous avons un groupe de boutons radio portant le nom property name = 'season' pour tous les boutons. Maintenant, entre ces boutons nommés saison nous allons vérifier lequel est sélectionné.

Copier le code

 var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { document.write('Radio button is selected'); } else { document.write('Nothing has been selected'); } 

Obtenez la valeur du bouton radio coché :

Utilisation de getElementById()

Voici le code pour obtenir la valeur du bouton radio coché à l’aide de la méthode getElementById() :

Copier le code

 if(document.getElementById('summer').checked) { var selectedValue = document.getElementById('summer').value; alert('Selected Radio Button is: ' + selectedValue); } 

Utilisation de querySelector()

Voici le code pour obtenir la valeur du bouton radio coché à l’aide de la méthode querySelector() :

Copier le code

 var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { alert('Selected radio button values is: ' + getSelectedValue.value); } 

Code complet pour obtenir la valeur du bouton radio sélectionné

Dans cet exemple, nous allons rassembler tout le code ci-dessus pour créer et cocher un bouton radio. Après cela, nous récupérerons également la valeur du bouton radio sélectionné.

Copier le code

ordinateur inventé en quelle année

 <br> <b> Choose your favroite season: </b> <br> Summer <br> Winter <br> Rainy <br> Autumn <br> <br> Submit <h3 id="disp" style="color:green"> </h3> <h4 id="error" style="color:red"> </h4> function checkButton() { if(document.getElementById(&apos;summer&apos;).checked) { document.getElementById(&apos;disp&apos;).innerHTML = document.getElementById(&apos;summer&apos;).value + &apos; radio button is checked&apos;; } else if(document.getElementById(&apos;winter&apos;).checked) { document.getElementById(&apos;disp&apos;).innerHTML = document.getElementById(&apos;winter&apos;).value + &apos; radio button is checked&apos;; } else if(document.getElementById(&apos;rainy&apos;).checked) { document.getElementById(&apos;disp&apos;).innerHTML = document.getElementById(&apos;rainy&apos;).value + &apos; radio button is checked&apos;; } else if(document.getElementById(&apos;autumn&apos;).checked) { document.getElementById(&apos;disp&apos;).innerHTML = document.getElementById(&apos;autumn&apos;).value + &apos; radio button is checked&apos;; } else { document.getElementById(&apos;error&apos;).innerHTML = &apos;You have not selected any season&apos;; } } 

Sortir

Lorsque vous exécuterez le code ci-dessus, il s'exécutera sur le Web et donnera le résultat ci-dessous :

Choisissez l'un des boutons radio et cliquez sur le Soumettre et obtenez la valeur sélectionnée.

Dans le cas où vous ne choisissez aucune des saisons et cliquez directement sur le Soumettre bouton, il vous montrera un message d'erreur indiquant que - Vous n'avez sélectionné aucune saison parce que nous avons utilisé la validation.

Récupère la valeur du bouton radio sélectionné : querySelector()

Méthode DOM querySelector()

La fonction querySelector() est une méthode DOM de JavaScript. Cette méthode est utilisée pour obtenir l'élément qui correspond au spécifié Sélecteur CSS dans le document. N'oubliez pas que vous devez spécifier la propriété name du bouton radio dans le code HTML.

Il est utilisé comme document.querySelector('input[name='JTP']:checked') à l'intérieur de pour vérifier la valeur du bouton radio sélectionné dans le groupe de boutons radio. Il minimise la longueur du code en obtenant la valeur du bouton radio sélectionné à l'aide d'une petite ligne de code.

 var selectedValue = document.querySelector('input[name='JTP']:checked') 

Voir le code ci-dessous comment il sera utilisé avec le formulaire HTML :

Copier le code

 <br> <b> Choose your favroite season: </b> <br> Summer <br> Winter <br> Rainy <br> Autumn <br> <br> Submit <h3 id="disp" style="color:green"> </h3> <h4 id="error" style="color:red"> </h4> function checkButton() { var getSelectedValue = document.querySelector( &apos;input[name=&apos;season&apos;]:checked&apos;); if(getSelectedValue != null) { document.getElementById(&apos;disp&apos;).innerHTML = getSelectedValue.value + &apos; season is selected&apos;; } else { document.getElementById(&apos;error&apos;).innerHTML = &apos;*You have not selected any season&apos;; } } 

Sortir

Lorsque vous exécuterez le code ci-dessus, il vous montrera la sortie sur le Web comme indiqué ci-dessous. À partir de là, choisissez votre saison préférée.

cout

Lorsque vous choisissez une valeur entre le bouton radio donné et cliquez sur le Soumettre bouton, vous obtiendrez la valeur sélectionnée sur le Web.

Si vous cliquez sur le Soumettre sans choisir aucun des boutons radio, il vous montrera un message d'erreur indiquant que - Vous n'avez sélectionné aucune saison .

Donc, ici vous pouvez voir que les deux getElementById('saison').value et document.querySelector('input[name='JTP']:checked') fonctionne pareil. Les deux sont utilisés pour trouver la valeur du bouton radio coché. Vous pouvez utiliser n’importe lequel d’entre eux.

getElementById et querySelector

Les deux méthodes DOM getElementByID() et querySelector() fonctionnent presque de la même manière. Cependant, ils présentent également quelques différences comme les performances et la taille du code, etc. Voyons quelques différences entre eux :

Longueur du code

Le code écrit avec getElementById est un peu plus long que querySelector. En utilisant la méthode getElementById, nous devons vérifier chaque bouton radio individuellement lequel est coché.

D'un autre côté, si vous utilisez la méthode DOM querySelector, il vous suffit de mettre une seule ligne de code pour cocher le bouton radio marqué et obtenir sa valeur. La conclusion est donc que querySelector nécessite moins de code.

Performance

Les deux fonctions offrent de bonnes performances, mais il vous suffit de savoir laquelle est la meilleure. Le getElementById la méthode est beaucoup plus rapide que la sélecteur de requête méthode. La méthode querySelector est également un peu complexe.

Valeur utilisée par les méthodes DOM

La méthode getElementById utilise toujours un identifiant unique de chaque bouton radio lors de la vérification du bouton marqué et renvoie le premier élément correspondant à l'identifiant.

Alors que querySelector utilise un nom (sélecteur) pour tous les boutons radio pour obtenir le bouton radio marqué et renvoie le premier élément qui correspond au sélecteur spécifié.