Atributo checked de HTML

El atributo HTML checked especifica que un elemento <input> debe estar seleccionado (marcado) cuando la página se carga por primera vez. Solo aplica a <input type="checkbox"> e <input type="radio">.

checked es un atributo boolean. Un atributo boolean es aquel cuya presencia por sí sola es lo que importa: checked, checked="" y checked="checked" son equivalentes y todos significan "verdadero". No se puede establecer como falso escribiendo checked="false"; para que un control comience sin marcar, simplemente omite el atributo por completo.

Botones de radio vs. casillas de verificación

Los dos tipos de input comparten el atributo checked pero se comportan de manera diferente:

Los botones de radio que comparten el mismo name forman un grupo mutuamente excluyente. Como máximo una opción del grupo puede estar marcada a la vez, por lo que agregar checked a más de un radio en un grupo no tiene sentido — solo prevalece el último. Es una buena práctica pre-marcar un radio para que el grupo siempre tenga un valor.
Las casillas de verificación son independientes. Cualquier número de ellas (incluidas ninguna) puede estar marcado al mismo tiempo, por lo que puedes agregar checked a tantas como quieras.

Sintaxis

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

Ejemplo: botones de 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>

Pruébalo tú mismo »

El radio football está preseleccionado cuando se carga la página. Dado que ambos inputs comparten name="game", seleccionar Basketball desmarca automáticamente Football.

Ejemplo: casillas de verificación

Aquí varias casillas de verificación están pre-marcadas a la vez — algo que no se puede hacer con un grupo de 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>

Envolver cada control en un <label> hace que el texto sea clicable y los lectores de pantalla lo anuncian junto con el estado de la casilla (por ejemplo, "Cheese, casilla de verificación, marcada"), lo que mejora la accesibilidad.

Establecer y leer checked con JavaScript

El atributo HTML solo establece el estado inicial. Para marcar, desmarcar o leer un control después de que la página se haya cargado, usa la propiedad DOM checked en vivo, que es un valor 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>

El atributo `checked` vs. la propiedad `checked`

Estos dos son fáciles de confundir:

El atributo HTML checked describe el estado inicial (predeterminado) escrito en el marcado. En el DOM se refleja mediante la propiedad defaultChecked y nunca cambia una vez que la página se ha cargado — incluso después de que el usuario haga clic.
La propiedad DOM element.checked refleja el estado actual y en vivo. Es lo que se lee para saber si la casilla está marcada en este momento, y lo que se asigna para cambiarlo.

// <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

Comportamiento de las casillas de verificación al enviar el formulario

Cuando se envía un formulario, solo los controles marcados envían su par name/value. Una casilla de verificación desmarcada se omite del cuerpo de la solicitud por completo — no aparece como valor vacío. Por lo tanto, si un usuario deja la casilla Olives sin marcar en el ejemplo anterior, el cuerpo POST contiene topping=cheese&topping=mushrooms sin ninguna mención de olives.

Una casilla de verificación sin un atributo value explícito envía el valor on cuando está marcada. Si necesitas detectar "desmarcado" en el servidor, agrega un campo oculto con el mismo name antes de la casilla como alternativa.

Atributos y elementos relacionados

Etiqueta <input> — el elemento que usa checked
Etiqueta <form> — recopila y envía los controles marcados
Atributo HTML disabled — impide la interacción con un input; una casilla de verificación deshabilitada no se envía aunque esté marcada
Etiqueta <select> — para listas desplegables de selección única o múltiple como alternativa a los radios y casillas de verificación

Práctica

¿Qué hace el atributo HTML 'checked'?

Especifica que una casilla de verificación o botón de radio debe estar seleccionado cuando la página se carga por primera vez.Establece el valor de texto predeterminado de un elemento input.Proporciona una pista al usuario sobre el valor esperado de un elemento input.Indica que una casilla de verificación o botón de radio no puede ser interactuado.Especifica que un input de texto debe rellenarse previamente con texto específico cuando se carga la página.Bloquea permanentemente el estado actual para que JavaScript no pueda cambiarlo.