Compruebe si la casilla de verificación está marcada con jQuery

Para comprobar el estado actual de una casilla con jQuery, lee su propiedad DOM checked. Usa .prop('checked') para obtener el valor directamente, .is(':checked') para comprobarlo mediante un selector, o accede al nodo DOM seleccionado con .get(0).checked (o [0].checked). El atributo HTML checked describe el estado inicial de la casilla; no refleja los cambios posteriores del usuario. (.get())

Comprobar si una casilla está marcada mediante acceso directo al DOM

Una selección de jQuery es una colección de elementos coincidentes. .get(0) devuelve el primer elemento DOM subyacente; su propiedad checked es un booleano que indica el estado actual. El acceso con corchetes [0] hace lo mismo. Usa cualquiera de estas formas solo si la selección contiene la casilla que quieres consultar.

Ejecuta este ejemplo:

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

const checkbox = { checked: true };
console.log(checkbox.checked ? "Checked" : "Not checked");

Checked

En una página que haya cargado jQuery, la comprobación equivalente es $("#terms").get(0).checked. El siguiente código fuente para el navegador muestra ese patrón con una casilla y un botón; se proporciona como código de la página, no como resultado de ejecución.

<!doctype html>
<html lang="en">
<body>
  <label><input id="terms" type="checkbox"> Accept the terms</label>
  <button id="check" type="button">Check state</button>
  <p id="result" aria-live="polite"></p>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("#check").on("click", function () {
      const isChecked = $("#terms").get(0).checked;
      $("#result").text(isChecked ? "The box is checked." : "The box is not checked.");
    });
  </script>
</body>
</html>

Si la selección puede coincidir con más de un elemento, .get(0) sigue devolviendo únicamente la primera coincidencia. Si no hay ninguna, el índice cero no proporciona una casilla que se pueda consultar. Para inspeccionar todas las coincidencias, recorre la colección o usa .is(':checked') para comprobar si hay alguna marcada.

Comprobar si una casilla está marcada con .prop()

Usa .prop('checked') para leer el estado actual de la casilla seleccionada:

$("#terms").prop("checked")

Para una sola casilla, este getter devuelve true si está marcada y false en caso contrario. Una colección de jQuery puede contener varios elementos; el getter lee la propiedad del primero que coincide. Selecciona una casilla concreta cuando el resultado deba corresponder a un control determinado.

La forma setter cambia el estado actual: $("#terms").prop("checked", true) marca la casilla y pasar false la desmarca. Usa el getter para consultar el estado actual y el setter para cambiarlo. Este patrón de propiedades también se aplica a otras propiedades actuales de los controles, como disabled en un botón. La documentación de jQuery sobre .prop() describe este acceso a las propiedades.

Comprobar si una casilla está marcada con .is() y :checked

El selector :checked coincide con casillas y botones de opción marcados; consulta la documentación de selectores de jQuery. .is(':checked') devuelve un booleano que indica si al menos un elemento de la colección de jQuery seleccionada coincide con ese selector. Consulta la documentación de .is():

$("#terms").is(":checked")

Esta expresión resulta clara cuando quieres saber si una casilla seleccionada está marcada. Por ejemplo, $("input[name='choice']").is(":checked") es verdadero si hay alguna casilla marcada dentro del grupo con ese nombre. En cambio, el selector $("input:checked") crea una colección de jQuery con todas las entradas marcadas; por sí solo no devuelve un booleano.

Al seleccionar por ID, no incluyas la almohadilla dentro del valor del atributo: usa $("#terms") o $("input[id='terms']"), no $("input[id='#terms']"). # forma parte de la sintaxis del selector de ID, no del valor del atributo id del elemento.

Casos de uso habituales de las casillas con jQuery

Estos patrones usan la propiedad actual checked y se pueden adaptar a tus propios ID, clases y estructura de formulario.

Seleccionar por ID o clase

Usa un ID para comprobar una casilla concreta: $("#terms").prop("checked"). Si una clase identifica a un grupo, recorre las coincidencias para consultar el estado de cada control:

Por ejemplo, $(".option").each(function () { console.log(this.id + ": " + (this.checked ? "checked" : "not checked")); }); recorre cada coincidencia. En una página, asegúrate de que la clase se aplique a las casillas y de que el código se ejecute después de que estas existan. Dentro de .each(), this es el elemento DOM actual, así que su propiedad checked corresponde a esa casilla.

Desmarcar una casilla solo si está marcada

Puedes desmarcar un control directamente con un setter, así que no hace falta comprobar antes su estado si el único objetivo es dejarlo desmarcado:

$("#terms").prop("checked", false)

Si otra acción solo debe realizarse cuando antes estaba marcada, compruébalo primero con if ($("#terms").is(":checked")) { ... } y después establece su propiedad en false.

Comprobar si todas o algunas casillas de una colección están marcadas

Para un grupo, .is(':checked') indica si hay algún elemento coincidente marcado. Para exigir que lo estén todos, compara la cantidad de coincidencias marcadas con el número total de casillas del grupo:

Por ejemplo, const $options = $("input.option[type='checkbox']"); const allChecked = $options.length > 0 && $options.filter(":checked").length === $options.length; const anyChecked = $options.is(":checked"); calcula ambas respuestas.

La condición length > 0 hace que «todas están marcadas» sea falso cuando el selector no encuentra ninguna casilla; suele ser la interpretación más práctica para un grupo de formulario. Elige otra regla para grupos vacíos solo si tu aplicación la necesita expresamente.

Habilitar un botón de envío según el estado de una casilla

Actualiza el botón cuando cambie la casilla, en vez de esperar a que se haga clic en un botón que podría estar deshabilitado:

Por ejemplo, define const update = () => $("#submit").prop("disabled", !$("#terms").is(":checked"));, asocia el evento con $("#terms").on("change", update) y llama a update() una vez después de asociarlo. Así se aplica el estado inicial al cargar la página y el botón permanece sincronizado cuando el usuario cambia la casilla. Sustituye #submit por el selector del control de envío de tu formulario.

El atributo HTML checked establece el estado marcado predeterminado de una casilla cuando se inicializa la página. La propiedad DOM actual checked refleja su estado después de que el usuario interactúe con ella o un script lo cambie. .attr('checked') lee el atributo; para consultar el estado actual, usa .prop('checked') o .is(':checked'). Por tanto, .attr() y .prop() responden a preguntas distintas sobre una casilla.