Attribut HTML checked

L'attribut HTML checked indique qu'un élément <input> doit être sélectionné (coché) au premier chargement de la page. Il s'applique uniquement à <input type="checkbox"> et à <input type="radio">.

checked est un attribut boolean. Un attribut boolean est celui dont la seule présence suffit — checked, checked="" et checked="checked" sont tous équivalents et signifient tous « vrai ». Il est impossible de le définir à faux en écrivant checked="false" ; pour qu'un contrôle commence décoché, il suffit d'omettre entièrement l'attribut.

Boutons radio vs cases à cocher

Les deux types d'entrée partagent l'attribut checked mais se comportent différemment :

Les boutons radio qui partagent le même name forment un groupe mutuellement exclusif. Au plus une option du groupe peut être cochée à la fois ; ajouter checked à plusieurs boutons radio d'un même groupe est donc inutile — seul le dernier l'emporte. Il est conseillé de pré-cocher un bouton radio afin que le groupe ait toujours une valeur.
Les cases à cocher sont indépendantes. N'importe quel nombre d'entre elles (y compris aucune) peut être coché simultanément ; vous pouvez donc ajouter checked à autant que vous le souhaitez.

Syntaxe

<input type="checkbox|radio" checked>
<input type="checkbox|radio" checked="checked">

Exemple : boutons radio

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>HTML Form Example</h2>
    <form action="/form/submit" method="post">
      <input type="radio" name="game" value="football" checked /> Football
      <input type="radio" name="game" value="basketball" /> Basketball
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Essayez vous-même »

Le bouton radio football est pré-sélectionné au chargement de la page. Comme les deux entrées partagent name="game", choisir Basketball désélectionne automatiquement Football.

Exemple : cases à cocher

Ici, plusieurs cases à cocher sont pré-cochées simultanément — ce qui est impossible avec un groupe de boutons radio :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Pick your toppings</h2>
    <form action="/form/submit" method="post">
      <label><input type="checkbox" name="topping" value="cheese" checked /> Cheese</label>
      <label><input type="checkbox" name="topping" value="mushrooms" checked /> Mushrooms</label>
      <label><input type="checkbox" name="topping" value="olives" /> Olives</label>
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Envelopper chaque contrôle dans un <label> rend le texte cliquable et permet aux lecteurs d'écran d'annoncer l'état de la case à cocher avec le libellé (par exemple « Cheese, case à cocher, cochée »), ce qui améliore l'accessibilité.

Définir et lire checked avec JavaScript

L'attribut HTML ne définit que l'état initial. Pour cocher, décocher ou lire un contrôle après le chargement de la page, utilisez la propriété DOM checked, qui est un boolean :

<!DOCTYPE html>
<html>
  <body>
    <input type="checkbox" id="subscribe" /> Subscribe
    <button onclick="toggle()">Toggle</button>
    <p id="status"></p>

    <script>
      const box = document.getElementById("subscribe");

      // Set the state programmatically
      box.checked = true;

      function toggle() {
        // Read the live state, then flip it
        box.checked = !box.checked;
        document.getElementById("status").textContent =
          "Checked: " + box.checked;
      }
    </script>
  </body>
</html>

L'attribut `checked` vs la propriété `checked`

Ces deux notions sont faciles à confondre :

L'attribut HTML checked décrit l'état initial (par défaut) tel qu'il est écrit dans le balisage. Dans le DOM, il est reflété par la propriété defaultChecked et ne change jamais une fois la page chargée — même après un clic de l'utilisateur.
La propriété DOM element.checked reflète l'état actuel et en direct. C'est ce que vous lisez pour savoir si la case est cochée à l'instant, et ce que vous assignez pour la modifier.

// <input type="checkbox" id="box" checked>
const box = document.getElementById("box");
box.click();                 // user unchecks it

box.checked;                 // false  → current state
box.defaultChecked;          // true   → original HTML attribute
box.hasAttribute("checked"); // true   → the attribute is still present

Comportement des cases à cocher lors de la soumission d'un formulaire

Lors de la soumission d'un formulaire, seuls les contrôles cochés envoient leur paire name/value. Une case à cocher décochée est entièrement omise du corps de la requête — elle n'apparaît pas comme une valeur vide. Ainsi, si l'utilisateur laisse la case Olives décochée dans l'exemple ci-dessus, le corps POST contient topping=cheese&topping=mushrooms sans aucune mention des olives.

Une case à cocher sans attribut value explicite soumet la valeur on lorsqu'elle est cochée. Si vous devez détecter « décoché » côté serveur, ajoutez un champ masqué avec le même name avant la case à cocher comme solution de repli.

Attributs et éléments associés

Balise <input> — l'élément qui utilise checked
Balise <form> — collecte et soumet les contrôles cochés
Attribut HTML disabled — empêche l'interaction avec une entrée ; une case à cocher désactivée n'est pas soumise même lorsqu'elle est cochée
Balise <select> — pour les listes déroulantes à sélection unique ou multiple, comme alternative aux boutons radio et cases à cocher

Pratique

Que fait l'attribut HTML 'checked' ?

Il indique qu'une case à cocher ou un bouton radio doit être sélectionné au premier chargement de la page.Il définit la valeur textuelle par défaut d'un élément de saisie.Il fournit un indice à l'utilisateur sur la valeur attendue d'un élément de saisie.Il indique qu'une case à cocher ou un bouton radio ne peut pas être utilisé.Il indique qu'une saisie de texte doit être pré-remplie avec le texte spécifié au chargement de la page.Il verrouille définitivement l'état actuel afin que JavaScript ne puisse pas le modifier.