Comment vérifier si une case à cocher est cochée en jQuery : guide complet avec exemples

Comment vérifier si une case à cocher est cochée en jQuery : tutoriel pas à pas pour débutants

Salut, ami ! Si tu as déjà travaillé avec des formulaires sur une page web, tu as sûrement rencontré cette question : « Cette case à cocher est-elle cochée ? ». Cela semble anodin, mais ce sont précisément ces petits détails qui laissent souvent perplexes même les développeurs expérimentés. Sur Stack Overflow, la question « How do I check whether a checkbox is checked in jQuery? » a recueilli des milliers de vues, ce qui montre que le sujet est vraiment brûlant.

Dans ce tutoriel, je ne vais pas simplement te montrer une syntaxe sèche. Nous allons examiner plusieurs méthodes, les comparer, découvrir où se cachent les pièges, et écrire un code propre et fonctionnel. C’est parti !

Pourquoi est-ce important ? (Et quel est le rapport avec jQuery ?)

Aujourd’hui, beaucoup passent au JavaScript pur, mais jQuery est toujours présent dans des millions de projets : des vieux sites aux panneaux d’administration modernes. Savoir comment utiliser :checked et les méthodes .prop() / .attr() est une base qui te fera gagner des heures de débogage.

Imagine : tu crées un formulaire d’inscription où il faut accepter les conditions. Ou une boutique en ligne avec des filtres de produits. Sans vérifier l’état d’une case à cocher, tu ne peux pas avancer.

Méthode n°1 : La classique — la méthode .prop()

La méthode moderne et correcte. Depuis jQuery 1.6, pour les attributs booléens (checked, disabled, selected), il faut utiliser .prop().

// HTML\n<input type="checkbox" id="agree"> J’accepte les conditions\n\n// jQuery\nif ($('#agree').prop('checked')) {\n    console.log('La case est cochée !');\n} else {\n    console.log('La case n’est pas cochée.');\n}

Pourquoi ça marche ? .prop() accède à la propriété de l’élément DOM, qui retourne toujours true ou false. C’est rapide, fiable et sans surprises.

Méthode n°2 : Le sélecteur :checked (concis)

Tu veux encore plus court ? Utilise le pseudo-sélecteur :checked. Il vérifie si l’élément est coché directement dans le sélecteur.

if ($('#agree:checked').length) {\n    console.log('Coché !');\n} else {\n    console.log('Pas coché.');\n}

Ou encore plus élégant :

if ($('#agree').is(':checked')) {\n    console.log('Coché !');\n}

La méthode .is() retourne true si au moins un élément de la sélection correspond au sélecteur. Joli et lisible.

Méthode n°3 : L’ancien .attr() — attention, piège !

Parfois, dans de vieux tutoriels, tu rencontreras ce code :

// MAUVAIS exemple\nif ($('#agree').attr('checked')) {\n    console.log('Coché');\n}

Ne fais pas ça ! .attr() lit l’attribut HTML, qui ne change pas après un clic utilisateur. Il retournera undefined ou la chaîne "checked" uniquement si l’attribut est présent dans le HTML initial. Il ne suit pas l’état dynamique. Tu veux un bug ?

Exemple concret : un formulaire avec plusieurs cases à cocher

Mettons tout ensemble. Imagine que nous avons une liste de loisirs et que nous voulons savoir lesquels l’utilisateur a sélectionnés.

<h3>Choisis tes loisirs :</h3>\n<label><input type="checkbox" class="hobby" value="coding"> Programmation</label>\n<label><input type="checkbox" class="hobby" value="gaming"> Jeux vidéo</label>\n<label><input type="checkbox" class="hobby" value="reading"> Lecture</label>\n<button id="showHobbies">Afficher les sélectionnés</button>\n\n<script>\n$('#showHobbies').on('click', function() {\n    let selected = [];\n    $('.hobby:checked').each(function() {\n        selected.push($(this).val());\n    });\n    if (selected.length) {\n        alert('Tu as choisi : ' + selected.join(', '));\n    } else {\n        alert('Rien n’est sélectionné.');\n    }\n});\n</script>

Remarque : nous utilisons .hobby:checked — un sélecteur qui sélectionne directement uniquement