JavaScript Checkbox onChange

L’événement change d’une case à cocher permet de réagir lorsque son état change. Pour lire sa valeur booléenne actuelle, consultez la propriété checked de l’élément. Vous pouvez associer un gestionnaire à l’aide d’un attribut onchange directement dans le HTML, affecter une fonction à la propriété onchange de l’élément ou enregistrer un écouteur change avec addEventListener.

Gérer les changements d’une case à cocher avec l’événement change

Pour une case à cocher, l’événement change se déclenche lorsque l’utilisateur modifie son état ; il n’attend pas que l’élément perde le focus. L’événement indique à votre code que l’état a changé, tandis que checked donne l’état actuel. Pour un même élément, choisissez l’une des méthodes suivantes afin que la logique de réaction ait un responsable clairement défini.

Utiliser un gestionnaire onchange directement dans le HTML

Un gestionnaire intégré place l’appel de fonction dans le code HTML de la case à cocher. Dans ce contexte, this désigne l’élément de case à cocher ; la fonction peut donc lire directement sa propriété checked. Une étiquette associe un texte descriptif au contrôle, et le paragraphe de résultat permet d’afficher son état.

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

<label>
  <input type="checkbox" onchange="showState(this)">
  Enable notifications
</label>
<p id="result" aria-live="polite"></p>
<script>
  function showState(checkbox) {
    document.getElementById("result").textContent = checkbox.checked;
  }
</script>

L’attribut HTML onchange indique le gestionnaire à appeler. textContent affiche la valeur booléenne sous forme de texte brut. Les gestionnaires intégrés peuvent être pratiques pour un petit exemple, mais ils mêlent le comportement au balisage et conviennent moins bien aux projets qui séparent ces responsabilités.

Affecter un gestionnaire à la propriété onchange

Pour définir le gestionnaire en JavaScript, donnez un id à la case à cocher, sélectionnez-la, puis affectez une fonction à sa propriété onchange. Si la fonction déclare un paramètre, elle reçoit un objet événement ; ce paramètre n’est pas nécessaire lorsqu’elle lit directement l’élément sélectionné.

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

<label>
  <input type="checkbox" id="notifications">
  Enable notifications
</label>
<p id="result" aria-live="polite"></p>
<script>
  const checkbox = document.getElementById("notifications");
  const result = document.getElementById("result");

  checkbox.onchange = function () {
    result.textContent = checkbox.checked;
  };
</script>

Affecter la propriété définit le gestionnaire de l’élément. Si vous affectez ensuite une autre fonction à cette même propriété, elle remplace la précédente. Utilisez donc un écouteur lorsque plusieurs parties indépendantes du code doivent réagir.

Enregistrer un écouteur change avec addEventListener

addEventListener enregistre une fonction de rappel pour l’événement indiqué. Cette méthode reçoit également l’objet événement comme argument de la fonction de rappel ; event.currentTarget désigne l’élément sur lequel cet écouteur a été enregistré.

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

<label>
  <input type="checkbox" id="notifications">
  Enable notifications
</label>
<p id="result" aria-live="polite"></p>
<script>
  const checkbox = document.getElementById("notifications");
  const result = document.getElementById("result");

  checkbox.addEventListener("change", function (event) {
    result.textContent = event.currentTarget.checked;
  });
</script>

Vous pouvez ajouter un écouteur sans remplacer les gestionnaires enregistrés ailleurs. Comme premier argument de addEventListener, indiquez le nom de l’événement change, et non onchange.

Lire l’état checked de la case à cocher

La propriété checked est booléenne : elle vaut true lorsque la case est cochée et false lorsqu’elle ne l’est pas. Lisez-la dans le gestionnaire pour obtenir l’état après le changement. Dans un navigateur, les exemples précédents affichent cette valeur dans la zone de résultat ; remplacez cette affectation par l’action dont votre interface a besoin, par exemple activer un contrôle associé.

Ce petit exemple JavaScript isole la lecture de l’état. Les exemples pour navigateur ci-dessus montrent comment relier cette logique à l’événement d’une véritable case à cocher.

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

function showState(checkbox) {
  return checkbox.checked;
}

const checkbox = { checked: true };
console.log(showState(checkbox));

true

L’exemple affiche la valeur booléenne renvoyée par checked. L’exemple JavaScript est autonome ; les extraits HTML sont des exemples de pages Web et ne sont pas présentés comme une sortie obtenue par exécution.