Obtenir la valeur du bouton radio sélectionné en JavaScript

1. Obtenir la valeur de l’élément radio à l’aide de document.querySelector() en JavaScript
2. Obtenir la valeur de l’élément radio par getElementsByName() en JavaScript

Un bouton radio est un élément d’entrée HTML qui spécifie une grande variété d’options parmi lesquelles l’utilisateur peut choisir n’importe quelle option. Dans cet article, nous allons apprendre à récupérer la valeur de cet élément HTML dans JavaScript.

Obtenir la valeur de l’élément radio à l’aide de document.querySelector() en JavaScript

Il s’agit d’une technique document de base fournie par JavaScript et qui renvoie la partie Objects/NodeList dont le selector correspond au selector souhaité. La seule différence entre querySelector() et querySelectorAll() est que l’objet d’élément unique correspondant est renvoyé en premier, puis tous les objets de l’élément correspondant. Si un selector invalide est passé, une SyntaxError est renvoyée.

Syntaxe:

document.querySelector($selector);

Le selector est un paramètre obligatoire qui spécifie la condition de correspondance ou l’identifiant de la classe. Cette chaîne doit être une chaîne de sélection CSS valide. Il renvoie le premier objet élément correspondant qui satisfait la condition selector dans le DOM.

Pour plus d’informations, lisez la documentation de la méthode querySelector.

Exemple de code :

<label for="gender">Gender: </label>
<input type="radio" name="gender" value="Male">Male
<input type="radio" name="gender" value="Female" checked="checked">Female

<button type="button" onclick="console.log(document.querySelector('input[name=gender]:checked').value)">
Click to check
</button>

Dans le code ci-dessus, nous avons défini deux éléments d’entrée avec les valeurs Male et Female. Lorsque nous accédons au document avec querySelector(), il trouve tous les nœuds dont l’attribut name correspond au genre et dont l’attribut coché vaut true. Puisqu’il s’agit d’un objet, nous pouvons directement extraire la valeur. Si vous avez besoin de trouver plus d’un élément correspondant, vous pouvez utiliser querySelectorAll() et parcourir le tableau, et imprimer toutes les valeurs. La sortie du code ci-dessus ressemblera à ceci :

Production :

Female

Obtenir la valeur de l’élément radio par getElementsByName() en JavaScript

Il s’agit d’une technique document de base fournie par JavaScript et qui retourne la partie Objects/NodeList dont l’attribut name correspond au nom recherché. Cette NodeList représente un tableau de nœuds accessibles à l’aide d’un index, et cet index commence par 0 comme tout autre tableau.

Syntaxe

document.getElementsByName(name);

name est un paramètre obligatoire qui spécifie le name d’un attribut HTML qui doit correspondre. Si des éléments correspondants sont trouvés, il renvoie l’objet de l’élément DOM correspondant ; sinon, il renvoie null.

La seule différence entre getElementsByName et querySelectorAll est que getElementsByName sélectionne d’abord uniquement les éléments dont l’attribut de nom spécifié correspond au nom donné. En revanche, querySelectorAll peut utiliser n’importe quel sélecteur, ce qui lui offre beaucoup plus de flexibilité.

Pour plus d’informations, lisez la documentation de la méthode getElementById.

Exemple de code :

<label for="gender">Gender: </label>
<input type="radio" name="gender" value="Male" checked="checked">Male
<input type="radio" name="gender" value="Female">Female

const radios = document.getElementsByName('gender');

for (var i = 0; i < radios.length; i++) {
  if (radios[i].checked) {
    console.log(radios[i].value);
    break;
  }
}

Dans le code ci-dessus, nous avons défini deux éléments d’entrée avec les valeurs Male et Female. Lorsque nous accédons au document avec getElementsByName(), il trouve tous les nœuds dont l’attribut name correspond au nom et renvoie NodeList. Puisqu’il s’agit d’un tableau, nous pouvons extraire le premier élément correspondant avec [0]. Si plusieurs éléments correspondants sont trouvés, vous pouvez parcourir le tableau et imprimer toutes les valeurs. La sortie du code ci-dessus ressemblera à ceci :

Production :

Male