Cómo marcar/seleccionar una casilla de verificación con jQuery - JavaScript

En esta breve guía, aprenderá cómo seleccionar elementos de casilla de verificación en la página y verificarlos en JavaScript, con Vanilla JavaScript y jQuery. Estaremos trabajando...

En esta breve guía, aprenderá cómo seleccionar elementos de casilla de verificación en la página y verificarlos en JavaScript, con Vanilla JavaScript y jQuery.

Trabajaremos con esta sencilla configuración de casilla de verificación:

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

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

elemento.marcado = verdadero

La forma absolutamente más simple de marcar o seleccionar una casilla de verificación es establecer explícitamente el campo marcado en verdadero:

1
2
3
4
// Get Element
checkBox = document.getElementById('takenBefore');
// Set the `checked` field to `true`
checkBox.checked = true

Para demostrar esto, adjuntemos un detector de eventos a un botón, que luego selecciona/marca programáticamente la casilla de verificación para nosotros. Este es un ejemplo benigno, pero sirve para el punto: estará marcando/seleccionando la casilla de verificación en función de alguna acción del usuario:

1
2
3
4
document.getElementById('button').addEventListener('click', event => {
    checkBox = document.getElementById('takenBefore');
    checkBox.checked = true
});

Esto resulta en:

check checkbox with javascript

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

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

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 a otros elementos que conducen a la selección de la casilla de verificación. Si ya tiene jQuery en su proyecto, obtendrá un código más simple al final, sin embargo, si esto es todo lo que necesita hacer, probablemente no valga la pena importar la biblioteca solo para esto.

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>

Ahora, con jQuery instalado, puede establecer fácilmente la propiedad marcada en verdadero como antes, pero con una sintaxis más simple:

1
$('#takenBefore')[0].checked = true

Aquí, obtenemos un objeto jQuery, no el elemento subyacente con el selector, por lo tanto, tendremos que subíndice y obtener el objeto subyacente para acceder a la propiedad marcada con [0].

De la misma manera, si queremos activar este código en función de alguna otra acción, como presionar un botón:

1
2
3
$('#button').on('click', function() {
    $('#takenBefore')[0].checked = true
});

Esta sintaxis es bastante más simple que la que hemos usado antes, sin embargo, es funcionalmente equivalente:

check checkbox with jquery and javascript

La desventaja de este enfoque es que es crudo. Simplemente utilizamos la sintaxis de selección más simple, pero finalmente establecemos explícitamente la propiedad en “verdadero” después de eso. Hay otra forma de establecer la propiedad, pero de forma más implícita.

$('#elemento').prop("marcado", verdadero)

La función prop() acepta un conjunto de argumentos clave-valor: el nombre de la propiedad a la que nos gustaría acceder y el valor que nos gustaría asignarle. El método en sí realiza una validación que no se realiza cuando establecemos explícitamente la propiedad en “verdadero” como antes.

Hablando en términos generales, si ya estás usando jQuery, se recomienda usar prop() en lugar de establecer explícitamente la propiedad, debido al beneficio adicional de la validación.

Dicho esto, configurar la casilla de verificación para que se marque/seleccione es tan fácil como:

1
$('#takenBefore').prop('checked', true);

Y de nuevo, dado que normalmente se activa en algún otro evento:

1
2
3
$('#button').on('click', function() {
    $('#takenBefore').prop('checked', true);
});

check checkbox with jquery

$('#elemento').attr("comprobado", verdadero)

En versiones anteriores de jQuery, que podría verse obligado a utilizar debido a las limitaciones del proyecto, la función prop() estaba precedida por la función attr(), que establecía los atributos de los elementos.

En este contexto, funciona de la misma manera que prop():

1
$('#takenBefore').attr('checked', true);

Y de nuevo, dado que normalmente se activa en algún otro evento:

1
2
3
$('#button').on('click', function() {
    $('#takenBefore').attr('checked', true);
});

Conclusión

En esta breve guía, hemos analizado cómo establecer una casilla de verificación en "marcada"/seleccionada usando Vanilla JavaScript y jQuery.

Hemos echado un vistazo a los métodos más simples, como establecer explícitamente la propiedad, y nos abrimos paso hasta el uso de los métodos de envoltorio de jQuery con validación.