Cómo verificar si la casilla de verificación está marcada en jQuery y JavaScript

En esta breve guía, aprenda cómo verificar si una casilla de verificación se ha marcado en JavaScript con jQuery, ¡usando la propiedad marcada, los métodos is() y prop()!

Las casillas de verificación son uno de los varios tipos de campos de entrada que usamos con mucha frecuencia para permitir que los usuarios interactúen con las páginas web y, por lo general, ENVIAR datos a un backend, marcando cualquier casilla que se aplique a una situación determinada.

A diferencia de los botones de radio (que pertenecen a grupos de radio), las casillas de verificación que pertenecen a un solo grupo no son mutuamente excluyentes, por lo que un usuario puede seleccionar múltiples casillas que correspondan. Debe tener esto en cuenta al comprobar si hay alguna opción seleccionada.

En esta guía, veremos cómo verificar si una casilla de verificación está marcada en jQuery, una biblioteca popular para JavaScript y Vanilla JavaScript.

elemento.verificado

Comencemos con una configuración simple de Checkbox:

1
2
3
4
5
6
<h1>Check if Checkbox is Checked</h1>
<p>Have you taken this test before?</p>
<input type="checkbox" id="takenBefore" placeholder="Yes">
<label for="takenBefore">Yes</label>

<button id="button"> Check Checkbox </button>

En JavaScript puro, verificar si una casilla de verificación está marcada es tan fácil como acceder al campo “marcado”, representado por un valor booleano:

1
2
3
4
5
6
7
// Get relevant element
checkBox = document.getElementById('takenBefore');
// Check if the element is selected/checked
if(checkBox.checked) {
    // Respond to the result
    alert("Checkbox checked!");
}

Sin embargo, este código solo se ejecutará si lo ejecuta específicamente. Por ejemplo, puede ejecutarlo cuando el usuario envía un formulario o desea pasar a la página siguiente como paso de validación. La validación no se realiza comúnmente de esta manera y, por lo general, se delega a bibliotecas que son más sólidas. Más comúnmente, desea reaccionar a la casilla de verificación para cambiar algo en la página, como proporcionar otras opciones de entrada.

En estos casos, querrá agregar un detector de eventos al botón y dejar que escuche los eventos, como hacer clic. Cuando ocurre un evento de este tipo, puede decidir responder al evento:

1
2
3
4
5
checkBox = document.getElementById('takenBefore').addEventListener('click', event => {
    if(event.target.checked) {
        alert("Checkbox checked!");
    }
});

En esta configuración, ¡el código está constantemente esperando y escuchando eventos en el elemento! Ahora tan pronto como alguien haga clic en la casilla de verificación, se ejecutará su método alert(). Esta vez, sin embargo, para obtener el elemento checkBox, lo obtenemos de la instancia event, como el objetivo de ese evento.

Cuando abra la página en un navegador y haga clic en el botón, será recibido con:

check if checkbox is checked with javascript

$('#elemento')[0].marcado

{.icon aria-hidden=“true”}

Nota: jQuery es una biblioteca de JavaScript popular, presente en muchos proyectos en todo el mundo. Debido a su peso ligero y características que amplían el alcance de las capacidades integradas de JavaScript, se ha convertido en un básico. No es sorprendente que se pueda usar para verificar si una casilla de verificación está seleccionada o no.

Podemos usar la sintaxis de selección de jQuery en lugar de JavaScript puro para simplificar tanto la selección del elemento como el detector de eventos adjunto.

Puede importar jQuery en su página a través de una Red de entrega de contenido (CDN). También puede usar el propio CDN de jQuery para importar la biblioteca.

1
2
3
4
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
        crossorigin="anonymous">
</script>

Para verificar si se ha marcado una casilla de verificación, en jQuery, simplemente puede seleccionar el elemento, obtener su objeto subyacente, en lugar del objeto jQuery ([0]) y usar la propiedad marcada incorporada:

1
2
let isChecked = $('#takenBefore')[0].checked
console.log(isChecked);

Aquí, estaríamos probando si la casilla de verificación takenBefore está marcada, accediendo a ella a través del selector de jQuery y usando el campo marcado innato como antes.

Alternativamente, puede definir un oyente que detecte un cambio:

1
2
3
$('#takenBefore').change(function() {
    alert('Checkbox checked!');
});

¡Este código es mucho más simple, pero funciona de la misma manera que la solución JS pura! Al hacer clic en la casilla de verificación, se activará una alerta como antes:

check if checkbox is checked with jquery

$('#elemento').es(':marcado'))

En lugar de verificar a través de la propiedad integrada checked, podemos descargar la lógica al método is(). El método is() es un método general que se puede usar para muchos propósitos y devuelve un verdadero/falso según los criterios de comparación. El selector :checked se creó específicamente para verificar si el botón de radio o el elemento de la casilla de verificación se han seleccionado o no.

Entonces, si los combina, es fácil verificar si una casilla de verificación es (': marcada'):

1
2
let isChecked = $('#takenBefore').is(':checked');
console.log(isChecked); // true (if checked at the time)

$('#elemento').prop("verificado")

En versiones anteriores de jQuery, se usaba attr() para acceder y manipular campos de elementos. En versiones más nuevas, el método fue reemplazado por prop(). Puede funcionar como getter/setter para las propiedades de los elementos y, en nuestro caso, como contenedor para obtener la propiedad marcada de un elemento.

1
2
let isChecked = $('#takenBefore').prop('checked');
console.log(isChecked); // true (if checked at the time)

es() vs prop()?

Entonces, ¿cuál es la diferencia entre is() y prop() en este contexto?

Ambos métodos parecen funcionar de la misma manera desde nuestra perspectiva. Entonces, ¿cuál es la diferencia?

is() tiene un poco más de procesamiento y análisis general que prop(). Incluso considerando el hecho de que prop() no solo accede a la propiedad y hace alguna validación, es más eficaz cuando se trata de procesar una gran cantidad de entradas, por ejemplo, en un bucle.

Por otro lado, is() siempre devuelve un valor booleano, mientras que prop() solo devuelve el tipo de propiedad subyacente. No puedes garantizar que algo más se coló, y tu código puede fallar en el tiempo de ejecución si no usas prop() correctamente. is() también indica semánticamente el valor de retorno - un booleano, lo que lo convierte en una opción más legible.

Conclusión

En esta breve guía, hemos analizado cómo verificar si la casilla de verificación está marcada con JavaScript y jQuery.

Hemos usado la propiedad checked, directa e indirectamente, seguida de los métodos is() y prop(), así como echamos un vistazo rápido a cuál podría preferir.