Comment vérifier si une checkbox est cochée ?
Publié le
Une checkbox, en apparence, c'est simple : cochée ou pas cochée. Mais dès qu'on veut
réagir à son état en JavaScript, désactiver un bouton, déclencher une action, valider un
formulaire, les questions arrivent vite. Comment lire son état ? Quand écouter le
changement ? Comment s'assurer que la case est bien cochée au moment du submit ? Voici
tout ce qu'il faut savoir, du cas le plus basique jusqu'à la récupération des données
avec FormData.
Le HTML de base : checkbox et label, toujours ensemble
Avant de toucher au JavaScript, un point sur la structure HTML. Une checkbox seule n'est
presque jamais la bonne option. Elle doit toujours être accompagnée d'un
<label>. C'est à la fois une question
d'accessibilité, les lecteurs d'écran ont besoin du label pour annoncer l'élément, et
une question d'ergonomie : sans label associé, l'utilisateur doit cliquer précisément
sur la petite case, ce qui peut devenir pénible sur mobile.
Il existe deux façons d'associer un label à une checkbox.
La première, avec for et
id correspondants :
<label for="cgv">J'accepte les conditions générales de vente</label>
La seconde, en enveloppant la checkbox dans le label (le
for/id devient
facultatif) :
<input type="checkbox" name="cgv" >
J'accepte les conditions générales de vente
</label>
Les deux approches sont valides. La première est légèrement plus explicite et plus facile à cibler en CSS ou JavaScript grâce à l'id. Dans tous les exemples qui suivent, on utilisera la première forme.
name à votre checkbox si elle est dans un formulaire.
C'est cet attribut qui servira de clé dans les données envoyées au serveur, ou
récupérées avec FormData.
Lire l'état d'une checkbox avec JavaScript
En JavaScript, l'état d'une checkbox est accessible via la propriété
checked de l'élément. Cette propriété retourne un
booléen : true si la case est cochée,
false sinon.
// Lire l'état au moment où on exécute cette ligne
console.log(checkbox.checked); // true ou false
C'est tout. Pas de méthode particulière à appeler, pas de valeur à parser. La propriété
checked reflète toujours l'état actuel de la case, en
temps réel.
Attention à l'attribut HTML checked
Il ne faut pas confondre la propriété
checked (JavaScript) avec l'attribut
checked (HTML). L'attribut HTML définit l'état initial
de la checkbox au chargement de la page. La propriété JavaScript reflète son état
courant, qui peut avoir changé depuis.
<input type="checkbox" id="newsletter" name="newsletter" checked>
// Si l'utilisateur a décoché la case, checked sera false
// même si l'attribut HTML "checked" est présent
console.log(document.getElementById('newsletter').checked); // false
Détecter le changement avec l'événement change
Lire checked ponctuellement c'est utile, mais dans la
plupart des cas on veut réagir au moment où l'utilisateur coche ou décoche. On
utilise pour ça l'événement change.
checkbox.addEventListener('change', function() {
if (checkbox.checked) {
console.log('La case est cochée');
} else {
console.log('La case est décochée');
}
});
L'événement change se déclenche à chaque fois que
l'état de la checkbox bascule. À l'intérieur du callback, on lit
checkbox.checked pour savoir dans quel état elle se
trouve maintenant.
change vs
click.
On voit parfois du code qui écoute l'événement
click sur une checkbox. Ça fonctionne, mais c'est
moins précis : click se déclenche aussi si
l'utilisateur navigue au clavier et active la case avec Espace, sans que
click ne soit déclenché de manière cohérente selon les
navigateurs. change est l'événement sémantiquement
correct pour les éléments de formulaire.
Cas pratique : activer un bouton quand la checkbox est cochée
L'exemple le plus courant : un bouton de validation qui reste désactivé tant que l'utilisateur n'a pas coché la case d'acceptation des CGV. Voici comment le mettre en place.
Le HTML
<input type="checkbox" id="cgv" name="cgv" >
<label for="cgv">J'accepte les conditions générales de vente</label>
<button type="submit" id="bouton-valider" disabled>Valider la commande</button>
</form>
Le bouton démarre avec l'attribut disabled. C'est la
bonne approche : on part d'un état verrouillé, et on déverrouille quand la condition est
remplie.
Le JavaScript
const bouton = document.getElementById('bouton-valider');
checkbox.addEventListener('change', function() {
bouton.disabled = !checkbox.checked;
});
La logique tient en une ligne : bouton.disabled vaut
true quand la checkbox n'est pas cochée, et
false quand elle l'est.
!checkbox.checked fait exactement cette inversion.
disabled depuis les outils de développement. Le
JavaScript améliore l'expérience, il ne remplace pas la validation serveur.
Vérifier l'état au moment du submit
Dans certains cas, on ne veut pas réagir à chaque changement, mais simplement vérifier l'état de la checkbox au moment où l'utilisateur soumet le formulaire, pour afficher un message d'erreur si elle n'est pas cochée, par exemple.
formulaire.addEventListener('submit', function(event) {
const checkbox = document.getElementById('cgv');
if (!checkbox.checked) {
event.preventDefault(); // On bloque l'envoi
alert('Vous devez accepter les CGV pour continuer.');
}
});
L'appel à event.preventDefault() empêche l'envoi du
formulaire si la case n'est pas cochée. C'est le point d'entrée classique pour toute
validation côté client.
Récupérer la valeur d'une checkbox avec FormData
Quand un formulaire est soumis, FormData permet de
récupérer l'ensemble des données du formulaire de manière propre, sans cibler chaque
champ manuellement.
Le comportement d'une checkbox dans FormData est
spécifique : si la case est cochée, la clé correspondant à son attribut
name est présente dans les données. Si elle est
décochée, cette clé est absente. Il n'y a pas de valeur
false : la clé disparaît simplement.
event.preventDefault();
const donnees = new FormData(formulaire);
// Vérifier si la checkbox "cgv" est cochée
const cgvAcceptees = donnees.has('cgv');
console.log(cgvAcceptees); // true si cochée, false si décochée
// Récupérer la valeur (par défaut : "on" si cochée)
const valeur = donnees.get('cgv');
console.log(valeur); // "on" si cochée, null si décochée
});
La méthode .has() est donc la façon la plus lisible de
tester si une checkbox est cochée via FormData. Elle
retourne true si la clé existe,
false sinon.
Personnaliser la valeur envoyée
Par défaut, si vous ne spécifiez pas d'attribut
value sur la checkbox, la valeur envoyée est la chaîne
"on". Vous pouvez définir votre propre valeur :
// Avec FormData :
donnees.get('cgv'); // → "accepte" si cochée
C'est utile quand vous envoyez les données en JSON à une API et que vous voulez une
valeur explicite plutôt que "on".
Synthèse : quelle approche selon votre cas ?
| Situation | Ce qu'on utilise |
|---|---|
| Lire l'état à un instant précis |
element.checked
|
| Réagir à chaque coche / décoche |
Événement change
|
| Activer / désactiver un bouton selon l'état |
change +
bouton.disabled = !checkbox.checked
|
| Valider la checkbox au submit du formulaire |
Événement submit +
element.checked
|
| Récupérer toutes les données du formulaire d'un coup |
new FormData(form) +
.has() ou
.get()
|
Pour un cas simple comme l'activation d'un bouton, lire
checkbox.checked dans un listener
change est largement suffisant. Pour un formulaire
plus complet avec plusieurs champs, FormData devient
vite plus pratique que de cibler chaque élément individuellement.
