Vérifiez si la case à cocher est cochée avec jQuery

Pour vérifier l’état actuel d’une case à cocher avec jQuery, lisez sa propriété DOM checked. Utilisez .prop('checked') pour obtenir directement cette valeur, .is(':checked') pour effectuer un test avec un sélecteur, ou accédez au nœud DOM sélectionné avec .get(0).checked (ou [0].checked). L’attribut HTML checked décrit l’état initial de la case ; il ne suit pas les changements effectués ensuite par l’utilisateur. (.get())

Vérifier une case à cocher avec un accès direct au DOM

Une sélection jQuery est une collection d’éléments correspondants. .get(0) renvoie le premier élément DOM sous-jacent, dont la propriété checked est un booléen indiquant l’état actuel. L’accès par indice [0] fait la même chose. N’utilisez l’une ou l’autre forme que si la sélection contient la case que vous souhaitez examiner.

Exécutez cet exemple :

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

const checkbox = { checked: true };
console.log(checkbox.checked ? "Checked" : "Not checked");

Checked

Dans une page où jQuery est chargé, le test équivalent est $("#terms").get(0).checked. Le code source du navigateur ci-dessous illustre ce modèle avec une case à cocher et un bouton ; il s’agit du code source de la page, et non d’une sortie d’exécution.

<!doctype html>
<html lang="en">
<body>
  <label><input id="terms" type="checkbox"> Accept the terms</label>
  <button id="check" type="button">Check state</button>
  <p id="result" aria-live="polite"></p>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("#check").on("click", function () {
      const isChecked = $("#terms").get(0).checked;
      $("#result").text(isChecked ? "The box is checked." : "The box is not checked.");
    });
  </script>
</body>
</html>

Si une sélection peut correspondre à plusieurs éléments, .get(0) renvoie toujours uniquement le premier. Si aucun élément ne correspond, l’indice zéro ne donne aucune case à cocher à lire. Pour examiner chaque correspondance, parcourez la collection ou utilisez .is(':checked') pour savoir si au moins un élément correspond.

Vérifier une case à cocher avec .prop()

Utilisez .prop('checked') pour lire l’état actuel de la case à cocher sélectionnée :

$("#terms").prop("checked")

Pour une seule case, cet accesseur renvoie true si elle est cochée et false sinon. Une collection jQuery peut contenir plusieurs éléments ; l’accesseur lit alors la propriété du premier élément correspondant. Sélectionnez une case précise si le résultat doit décrire un contrôle en particulier.

La forme avec un paramètre définit l’état actif : $("#terms").prop("checked", true) coche la case, et la valeur false la décoche. Utilisez l’accesseur pour connaître l’état actuel et la forme avec un paramètre pour le modifier. Le même modèle s’applique à d’autres propriétés actives des contrôles, comme disabled sur un bouton. La documentation de jQuery sur .prop() décrit cet accès aux propriétés.

Vérifier une case à cocher avec .is() et :checked

Le sélecteur :checked correspond aux cases à cocher et aux boutons radio qui sont cochés ; consultez la documentation des sélecteurs jQuery. .is(':checked') renvoie un booléen indiquant si au moins un élément de la collection jQuery sélectionnée correspond à ce sélecteur. Consultez la documentation de .is() :

$("#terms").is(":checked")

Cette forme convient bien pour demander si une case sélectionnée est cochée. Par exemple, $("input[name='choice']").is(":checked") renvoie true si une case du groupe portant ce nom est cochée. En revanche, le sélecteur $("input:checked") crée une collection jQuery contenant toutes les entrées cochées ; à lui seul, il ne renvoie pas de booléen.

Sélectionnez un identifiant sans dièse dans la valeur de l’attribut : utilisez $("#terms") ou $("input[id='terms']"), et non $("input[id='#terms']"). Le caractère # fait partie de la syntaxe du sélecteur d’identifiant, pas de la valeur de l’attribut id de l’élément.

Cas d’usage courants des cases à cocher avec jQuery

Ces modèles utilisent la propriété actuelle checked et peuvent être adaptés à vos identifiants, classes et formulaires.

Sélectionner par identifiant ou par classe

Utilisez un identifiant pour vérifier une case connue : $("#terms").prop("checked"). Si une classe est partagée par un groupe, parcourez les éléments correspondants pour connaître l’état de chacun :

Par exemple, $(".option").each(function () { console.log(this.id + ": " + (this.checked ? "checked" : "not checked")); }); parcourt chaque correspondance. Dans une page, vérifiez que la classe est appliquée aux champs de type case à cocher et que le code s’exécute après leur création. Dans .each(), this désigne l’élément DOM courant ; sa propriété checked correspond donc à l’état de cette case.

Décochez une case uniquement si elle est cochée

Un accesseur avec une valeur peut décocher directement un contrôle. Il est donc inutile de vérifier son état au préalable si le seul objectif est de s’assurer qu’il est décoché :

$("#terms").prop("checked", false)

Si une autre action ne doit avoir lieu que lorsque la case était cochée auparavant, commencez par tester son état avec if ($("#terms").is(":checked")) { ... }, puis définissez sa propriété sur false.

Vérifier si toutes les cases ou au moins une case d’une collection sont cochées

Pour un groupe, .is(':checked') indique si au moins un élément correspondant est coché. Pour exiger que toutes les cases le soient, comparez le nombre de correspondances cochées au nombre total de cases du groupe :

Par exemple, const $options = $("input.option[type='checkbox']"); const allChecked = $options.length > 0 && $options.filter(":checked").length === $options.length; const anyChecked = $options.is(":checked"); calcule les deux réponses.

La condition length > 0 fait que « toutes cochées » vaut false lorsque le sélecteur ne trouve aucune case, ce qui est généralement l’interprétation utile pour un groupe de formulaire. Choisissez une autre règle pour un groupe vide uniquement si votre application en a explicitement besoin.

Activer un bouton d’envoi en fonction d’une case à cocher

Mettez le bouton à jour lorsque l’état de la case change, au lieu d’attendre un clic sur un bouton qui peut être désactivé :

Par exemple, définissez const update = () => $("#submit").prop("disabled", !$("#terms").is(":checked"));, associez cette fonction à l’événement avec $("#terms").on("change", update), puis appelez update() une fois après l’association. Cela applique l’état initial au chargement de la page et maintient le bouton synchronisé lorsque l’utilisateur coche ou décoche la case. Remplacez #submit par le sélecteur du bouton d’envoi de votre formulaire.

L’attribut HTML checked définit l’état coché par défaut lors de l’initialisation de la page. La propriété DOM active checked reflète l’état actuel après une interaction ou une modification par un script. .attr('checked') lit l’attribut ; utilisez .prop('checked') ou .is(':checked') pour connaître l’état actuel. .attr() et .prop() répondent donc à des questions différentes pour une case à cocher.