Checkbox HTML: valores múltiples, required e indeterminate

HTML <input type="checkbox"> permite que cada opción sea seleccionada o desmarcada de manera independiente. Solo las casillas marcadas envían su nombre y valor; una opción desmarcada se omite de los datos enviados en lugar de enviarse como falso o cadena vacía.

Leer múltiples valores con el mismo nombre

A diferencia de los botones de opción, las casillas de verificación con el mismo name se pueden seleccionar juntas. Sus valores se repiten bajo un mismo nombre, así que léelos todos. Usa getAll en una instancia de FormData de JavaScript y consulta las reglas de tu framework de servidor para manejar múltiples valores.

name identifica el campo; value es lo que envía cuando está seleccionado. Omitir el valor usa la cadena predeterminada on, así que especifica valores para distinguir las opciones. Da a cada casilla de verificación un id único para su etiqueta.

Ejemplo completo: selección múltiple, comprobaciones obligatorias y entradas excluidas

Guarda este código como checkbox-demo.html y ábrelo en un navegador. Muestra las entradas reales del formulario en lugar de enviarlas a un servidor. Compara cómo una opción deshabilitada se excluye incluso cuando está marcada.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Valores enviados por las casillas</title>
  <style>pre { white-space: pre-wrap; overflow-wrap: anywhere; }</style>
</head>
<body>
  <h1>Práctica de casillas</h1>
  <form id="demo">
    <fieldset>
      <legend>Colores preferidos (selección múltiple)</legend>
      <input type="checkbox" id="blue" name="color" value="blue" checked>
      <label for="blue">Azul</label>
      <input type="checkbox" id="red" name="color" value="red">
      <label for="red">Rojo</label>
      <input type="checkbox" id="locked" name="color" value="green" checked disabled>
      <label for="locked">Verde (desactivado)</label>
    </fieldset>
    <p>
      <input type="checkbox" id="ready" name="ready" value="yes" required>
      <label for="ready">Preparación completada (obligatoria)</label>
    </p>
    <button type="submit">Mostrar valores</button>
    <button type="reset">Restablecer</button>
    <button type="button" id="partial">Mostrar Azul como parcialmente seleccionado</button>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.getElementById('demo');
    const result = document.getElementById('result');
    const blue = document.getElementById('blue');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify(Array.from(new FormData(form).entries()), null, 2);
    });
    document.getElementById('partial').addEventListener('click', () => {
      blue.indeterminate = true;
    });
    form.addEventListener('reset', () => {
      result.textContent = '';
      blue.indeterminate = false;
    });
  </script>
</body>
</html>

1. Envía sin seleccionar la casilla de preparación: la validación requerida bloquea el envío.
2. Selecciona preparación y Rojo, luego envía. La salida contiene color=blue, color=red y ready=yes; el Verde deshabilitado se excluye.
3. Desmarca Azul y Rojo y envía otra vez. Desaparecen las entradas color y solo queda ready=yes.
4. Restablecer devuelve Azul y Verde a marcado, mientras que Rojo y preparación vuelven a desmarcarse.

Distingue entre marcado, requerido e indeterminado

El atributo checked da la selección inicial. Lea el estado actual usando la propiedad checked de JavaScript. checked="false" todavía tiene el atributo presente; omítalo para una casilla inicialmente desmarcada. Reset restaura los valores iniciales en lugar de limpiar todas las casillas.

Una casilla con required debe estar marcada por sí misma. No significa que cualquier casilla que comparta el mismo nombre sea suficiente. Una condición de “al menos una de estas” necesita validación y orientación separadas.

indeterminate es una propiedad de JavaScript que muestra un estado de selección parcial. No se establece a través de un atributo HTML y es independiente de checked, que determina el envío. Después de reiniciar, presiona el botón de visualización parcial, selecciona la casilla de preparación requerido e comprueba los valores: el azul todavía se envía. La visualización parcial no borra checked ni crea un tercer valor enviado.

Manejar valores faltantes y múltiples en el servidor

Tratar cada opción no marcada como un error, o leer solo el último valor de un nombre repetido, puede cambiar el significado previsto. Distinga “nada seleccionado” de una solicitud inválida utilizando las reglas de su aplicación, y valide los valores permitidos en el servidor.

PHP puede recibir name="color[]" como un arreglo, pero esto sigue las reglas del analizador del servidor. Un navegador no envía un objeto de arreglo universal para cada lenguaje de programación. Verifique que el valor recibido sea un arreglo y maneje los valores faltantes, los arreglos anidados y los valores no permitidos. Consulte la documentación de PHP sobre variables externas para las reglas de análisis y la referencia de casillas de verificación en MDN para el comportamiento de las casillas de verificación.