Comment vérifier qu'un bouton radio est coché en JavaScript ?
J'ai un formulaire avec des boutons radio, comment faire pour savoir si un bouton radio est coché avec JavaScript ?
<input type="radio" name="test" value="1">
<input type="radio" name="test" value="2">
<input type="radio" name="test" value="3">
Pour vérifier qu'un bouton radio est coché en JavaScript, vous pouvez utiliser la méthode querySelector().
Dans l'exemple ci-dessous on créé une fonction qui est exécutée lorsque l'utilisateur clique sur un bouton :
onclick="verifierRadio()"
On définit ensuite une constante qui liste toutes les cases à cocher dont la propriété name est test :
const cases = document.querySelectorAll('input[name="test"]');
Puis on crée un boucle for pour parcourir toutes les cases ; on vérifie ensuite celle qui est cochée avec la présence, ou non, de l'attribut checked.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Comment vérifier qu'un bouton radio est coché en JavaScript ?</title>
</head>
<body>
<input type="radio" name="test" value="1"> valeur 1<br>
<input type="radio" name="test" value="2"> valeur 2<br>
<input type="radio" name="test" value="3"> valeur 2<br>
<button onclick="verifierRadio()">Envoyer</button>
<script>
var bouton_radio = "non";
function verifierRadio() {
const cases = document.querySelectorAll('input[name="test"]');
for (const x of cases) {
if (x.checked) {
var bouton_radio = "oui";
break;
}
}
if (bouton_radio == "oui") {
alert("La case cochée a la valeur : " + document.querySelector('input[name="test"]:checked').value);
}
else alert("Aucun bouton n'a été coché");
}
</script>
</body>
</html>
Vous trouverez une démo dans le Bac à codes, et d'avantage d'informations sur la manière d'utiliser querySelector(), et de tester si un bouton radio est coché, via cette page du site de Mozilla.