Comment définir "checked" pour une case à cocher avec jQuery : analyse détaillée pour débutants

Pourquoi la case à cocher devient-elle folle ? Histoire d'un bug

Imaginez : vous écrivez un formulaire d'inscription sur un site. Il y a une case à cocher "J'accepte les conditions". L'utilisateur clique — la coche apparaît. Tout fonctionne. Puis vous décidez d'ajouter un bouton "Tout cocher" avec jQuery. Vous écrivez $('#agree').attr('checked', true) — et... rien ne se passe. Ou la coche apparaît une fois, puis ne se décoche plus. Cela vous dit quelque chose ?

Cette question est l'une des plus populaires sur Stack Overflow. Des milliers de développeurs tombent dans le même piège. Et aujourd'hui, nous allons comprendre pourquoi cela se produit et comment définir correctement checked pour une case à cocher avec jQuery.

En bref : quel est le problème ?

Le problème est que de nombreux débutants (et pas seulement) utilisent la méthode .attr() pour gérer l'attribut checked. Mais depuis jQuery 1.6, la bonne méthode est d'utiliser .prop(). La différence entre un attribut (attribute) et une propriété (property) est le sujet clé que nous allons maintenant décortiquer.

Attribut vs Propriété : quelle est la différence ?

Expliquons simplement. Un attribut HTML est ce que vous écrivez dans le balisage :

<input type="checkbox" id="agree" checked>

L'attribut checked définit ici l'état initial de la case à cocher. Mais lorsque l'utilisateur clique, c'est la propriété (property) de l'élément DOM qui change, tandis que l'attribut reste inchangé.

La méthode .attr() travaille avec les attributs, tandis que .prop() travaille avec les propriétés. Et comme nous nous intéressons à l'état actuel de la case à cocher (qui change dynamiquement), nous avons besoin de .prop().

À quoi cela ressemble dans le code

Voici un exemple simple qui montre la différence :

<!-- HTML -->\n<input type="checkbox" id="myCheckbox">\n<button id="setChecked">Cocher</button>\n<button id="removeChecked">Décocher</button>\n\n<script>\n// Méthode correcte (jQuery 1.6+)\n$('#setChecked').click(function() {\n    $('#myCheckbox').prop('checked', true);\n});\n\n$('#removeChecked').click(function() {\n    $('#myCheckbox').prop('checked', false);\n});\n</script>

Notez que nous passons true ou false comme second argument — une valeur booléenne. C'est important.

Erreurs typiques des débutants (et comment les éviter)

Erreur 1 : Utiliser .attr() pour définir checked

// ❌ Incorrect\n$('#myCheckbox').attr('checked', true);\n\n// ❌ Également incorrect\n$('#myCheckbox').attr('checked', 'checked');

Pourquoi est-ce mauvais ? Parce que .attr() définit l'attribut, pas la propriété. Après le premier clic de l'utilisateur, l'attribut peut rester, mais la propriété change. Résultat : un comportement incohérent.

Erreur 2 : Passer une chaîne au lieu d'une valeur booléenne

// ❌ Incorrect\n$('#myCheckbox').prop('checked', 'true'); // chaîne, pas booléen

jQuery convertit-il la chaîne en booléen ? Dans certains cas, oui. Mais compter là-dessus est une mauvaise pratique. Toujours passer true ou false sans guillemets.

Erreur 3 : Oublier .prop() lors de la lecture de l'état

// ❌ Incorrect\nif ($('#myCheckbox').attr('checked')) { ... }\n\n// ✅ Correct\nif ($('#myCheckbox').prop('checked')) { ... }

Pour lire l'état actuel — uniquement .prop().

Exemple complet : formulaire avec cases à cocher et boutons de contrôle

Rassemblons tout cela. Imaginez que nous avons une liste d'options que l'utilisateur peut sélectionner, et des boutons "Tout sélectionner" et "Tout désélectionner".

<!DOCTYPE html>\n<html>\n<head>\n    <title>Gestion des cases à cocher avec jQuery</title>\n    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>\n</head>\n<body>\n    <h3