Comment récupérer la valeur d'un bouton radio ?
Les boutons radios sont utilisés pour offrir à l'utilisateur la possibilité de choisir une option parmi plusieurs.
En HTML, on écrit les boutons radios, ou boutons d'option, de la manière suivante:
<input type=radio id=choix1 name=choix value=Choix 1> Choix 1 <input type=radio id=choix2 name=choix value=Choix 2> Choix 2 <input type=radio id=choix3 name=choix value=Choix 3 checked=checked> Choix 3
Dans cet exemple, c'est l'option Choix 3 qui a été cochée par l'utilisateur, mais comment récupérer cette valeur ? En JavaScript, on peut utiliser l'id présent sur chaque bouton radio pour les sélectionner. La propriété checked permet ensuite de déterminer si le bouton radio est coché. La propriété value contient la valeur du bouton radio.
//S'il est coché, on récupère la valeur du bouton radio.
var valeur;
if (document.getElementById('choix1').checked) {
valeur = document.getElementById('choix1').value;
}
Cette méthode oblige cependant à effectuer un contrôle pour chaque option, ce qui ajoute du code supplémentaire pour chaque bouton radio. Une solution plus dynamique consiste à récupérer tous les boutons radios en fonction de leur attribut name, qui est identique. Il suffit ensuite d'effectuer le contrôle pour chaque bouton:
var radios = document.getElementsByName('choix');
var valeur;
for(var i = 0; i < boutons.length; i++){
if(boutons[i].checked){
valeur = boutons[i].value;
}
}
Si le site que vous développez n'est pas fait pour IE8, alors vous pouvez utiliser l'API Selectors. Cette API, supportée par la plupart des navigateurs et par Internet Explorer à partir de la version 9, permet de sélectionner des éléments en utilisant des requêtes directement sur le DOM. On peut ainsi sélectionner les input avec un attribut name ayant une valeur spécifique, et l'option :checked permet de récupérer l'élément coché. On peut ainsi réduire le code utilisé plus haut à une seule ligne :
var valeur = document.querySelector('input[name=choix]:checked').value;