Comment récupérer les valeurs de plusieurs checkbox en JavaScript ?

Réponses rédigées par Antoine
Dernière mise à jour : 2022-02-14 16:08:25
Thèmes : checkbox - javascript
Question

Comment faire pour récupérer les valeurs de plusieurs cases à cocher du type checkbox en JavaScript ?

Réponse

Pour récupérer les valeurs de plusieurs checkbox en JavaScript, vous pouvez attribuer un même nom aux cases du type checkbox name="test", puis utiliser une boucle for avec la méthode getElementsByName() et l'attribut checked pour identifier les cases cochées.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Comment récupérer les valeurs de plusieurs checkbox en JavaScript ?</title>
</head>
<body>   
<input type="checkbox" name="test" value="1">Valeur 1<br>
<input type="checkbox" name="test" value="2">Valeur 2<br>
<input type="checkbox" name="test" value="3">Valeur 3<br>
<input type="checkbox" name="test" value="4">Valeur 4<br>
<input type="checkbox" name="test" value="5">Valeur 5<br>
<button onclick="recupValeurs();">Envoyer</button>
<script>
function recupValeurs() {
  var cases = document.getElementsByName('test');
  var resultat = "";
     for (var i = 0; i < cases.length; i++) {
        if (cases[i].checked) {
           resultat += cases[i].value  + ", ";
        }
     }
  alert("Valeurs sélectionnées : " + resultat);
}
</script>
</body>
</html>