Cómo verificar si un checkbox está seleccionado en jQuery: guía completa con ejemplos

Cómo verificar si un checkbox está seleccionado en jQuery: tutorial paso a paso para principiantes

¡Hola, amigo! Si alguna vez has trabajado con formularios en una página web, seguramente te has enfrentado a la tarea: «¿Está seleccionado este checkbox?». Parece una tontería, pero son precisamente estas pequeñas cosas las que a menudo desconciertan incluso a desarrolladores experimentados. En Stack Overflow, la pregunta «How do I check whether a checkbox is checked in jQuery?» ha acumulado miles de visitas, lo que significa que el tema es realmente candente.

En este tutorial no solo mostraré sintaxis seca. Analizaremos varias formas, las compararemos, descubriremos dónde están los peligros y escribiremos un código bonito y funcional. ¡Vamos allá!

¿Por qué es importante? (¿Y qué tiene que ver jQuery?)

Hoy en día muchos migran a JavaScript puro, pero jQuery sigue vivo en millones de proyectos: desde sitios antiguos hasta paneles de administración modernos. Saber cómo trabajar con :checked y los métodos .prop() / .attr() es una base que te ahorrará horas de depuración.

Imagina: estás haciendo un formulario de registro donde debes aceptar los términos. O una tienda online con filtros de productos. Sin verificar el estado del checkbox, no puedes avanzar.

Método n.º 1: El clásico — método .prop()

La forma moderna y correcta. Desde jQuery 1.6, para atributos booleanos (checked, disabled, selected) se debe usar .prop().

// HTML\n<input type="checkbox" id="agree"> Acepto los términos\n\n// jQuery\nif ($('#agree').prop('checked')) {\n    console.log('¡Checkbox seleccionado!');\n} else {\n    console.log('Checkbox no seleccionado.');\n}

¿Por qué funciona? .prop() accede a la propiedad del elemento DOM, que siempre devuelve true o false. Es rápido, fiable y sin sorpresas.

Método n.º 2: Selector :checked (conciso)

¿Quieres algo aún más corto? Usa el pseudoselector :checked. Verifica si el elemento está seleccionado directamente en el selector.

if ($('#agree:checked').length) {\n    console.log('¡Seleccionado!');\n} else {\n    console.log('No seleccionado.');\n}

O aún más elegante:

if ($('#agree').is(':checked')) {\n    console.log('¡Seleccionado!');\n}

El método .is() devuelve true si al menos un elemento de la selección coincide con el selector. Bonito y legible.

Método n.º 3: El viejo .attr() — ¡cuidado, es una trampa!

A veces en tutoriales antiguos encontrarás este código:

// Ejemplo MALO\nif ($('#agree').attr('checked')) {\n    console.log('Seleccionado');\n}

¡No hagas esto! .attr() lee el atributo HTML, que no cambia después del clic del usuario. Devolverá undefined o la cadena "checked" solo si el atributo está escrito en el HTML originalmente. No rastrea el estado dinámico. ¿Atrapaste el error?

Ejemplo en vivo: formulario con varios checkboxes

Juntemos todo. Imagina que tenemos una lista de pasatiempos y queremos saber cuáles seleccionó el usuario.

<h3>Elige tus pasatiempos:</h3>\n<label><input type="checkbox" class="hobby" value="coding"> Programación</label>\n<label><input type="checkbox" class="hobby" value="gaming"> Juegos</label>\n<label><input type="checkbox" class="hobby" value="reading"> Lectura</label>\n<button id="showHobbies">Mostrar seleccionados</button>\n\n<script>\n$('#showHobbies').on('click', function() {\n    let selected = [];\n    $('.hobby:checked').each(function() {\n        selected.push($(this).val());\n    });\n    if (selected.length) {\n        alert('Seleccionaste: ' + selected.join(', '));\n    } else {\n        alert('No seleccionaste nada.');\n    }\n});\n</script>

Observa: usamos .hobby:checked — este es un selector que filtra de inmediato solo los