JavaScript Checkbox onChange

El evento change de una casilla de verificación permite responder cuando cambia su estado. El valor booleano actual se obtiene de la propiedad checked del elemento. Puedes conectar un controlador mediante el atributo onchange en línea, asignarlo a la propiedad onchange del elemento o registrar un listener para change con addEventListener.

Gestionar los cambios de una casilla con el evento change

En una casilla de verificación, el evento change se dispara cuando el usuario cambia su estado; no espera a que el elemento pierda el foco. El evento indica al código que el estado ha cambiado, mientras que checked indica cuál es el estado actual. Elige uno de estos patrones para cada elemento, de modo que quede claro qué controlador se encarga de responder.

Usar un controlador onchange en línea

Un controlador en línea incluye la llamada a la función en el HTML de la casilla. En este contexto del controlador, this hace referencia al elemento de la casilla, por lo que la función puede leer directamente su propiedad checked. Una etiqueta vincula un texto descriptivo con el control, y el párrafo de resultado ofrece un lugar donde mostrar el estado.

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

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

El atributo HTML onchange indica qué controlador se debe llamar. textContent muestra el valor booleano como texto sin formato. Los controladores en línea pueden ser prácticos en un ejemplo pequeño, pero mezclan el comportamiento con el marcado y pueden ser menos adecuados si el proyecto mantiene esos aspectos separados.

Asignar un controlador a la propiedad onchange

Para mantener el controlador en JavaScript, asigna un id a la casilla, selecciónala y asigna una función a su propiedad onchange. Si la función declara un parámetro, recibe un objeto de evento; no hace falta incluir ese parámetro si la función lee directamente el elemento seleccionado.

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

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

Al asignar la propiedad, se establece el controlador del elemento. Si más adelante asignas otra función a la misma propiedad, esta reemplaza a la anterior. Por eso, usa un listener cuando varias partes independientes del código deban responder.

Registrar un listener de change con addEventListener

addEventListener registra una función de retorno de llamada para el evento indicado. Este patrón también recibe el objeto de evento como argumento de la función; event.currentTarget identifica el elemento en el que se registró este listener.

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

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

Puedes añadir un listener sin reemplazar los controladores registrados en otros lugares. Como primer argumento de addEventListener, usa el nombre del evento change, no onchange.

Leer el estado checked de la casilla

La propiedad checked es booleana: vale true cuando la casilla está marcada y false cuando no lo está. Léela dentro del controlador para obtener el estado posterior al cambio. En un navegador, los ejemplos anteriores escriben ese valor en la región de resultado; puedes sustituir esa asignación por la acción que necesite tu interfaz, como habilitar un control relacionado.

Este pequeño ejemplo de JavaScript aísla la lógica para leer el estado. Los ejemplos para navegador anteriores muestran cómo conectar esa lógica con el evento de una casilla real.

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

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

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

true

El ejemplo imprime el valor booleano obtenido de checked. El ejemplo de JavaScript es independiente; los fragmentos HTML son ejemplos de una página para navegador y no se presentan como resultados de una ejecución.