baulcode
Detectar Checkbox Marcados JavaScript. Este es un tutorial realizaremos un script sobre cómo detectar cada vez que una casilla de verificación ha sido marcada o desmarcada por el usuario en un formulario HTML. Sin embargo, para lograr tal objetivo usaremos JavaScript y jQuery para detectar eventos en una determinada casilla de verificación (CheckBox).
Este tipo de procedimientos es muy requerido para forzar al usuario por ejemplo a marcar una casilla para aceptar términos y condiciones en un determinado servicio por internet, por ejemplo: YouTube, Google, Facebook, entre otro servicios gratuitos en internet.
Detectar Checkbox Marcados JavaScript
Detectar Checkbox Marcados JavaScript
A continuación, veremos 2 formas de lograr el objetivo final de detectar eventos de una casilla de verificación.
Primera Forma: Detectar casilla usando JavaScript
En el lenguaje JavaScript usaremos una función llamada «terminos_cambio» que será declarada en la etiqueta head dentro de nuestro fichero HTML. Sin embargo, también tenemos que usar esa función en el elemento HTML «input» a través del evento «onclick«. Veamos un ejemplo de uso.
Declaración del evento onclick en el elemento input HTML:
<input type="checkbox" id="terminos" value="1" onclick="terminos_cambio(this)" />
En el código anterior como podemos apreciar, hemos agregado una llamada de función al controlador de eventos. Cuando el usuario hace clic en la casilla, se llamará a la función «terminos_cambio«. El parámetro «this» representa la casilla de verificación antes declarada.
Resumiendo, el elemento DOM se pasará como parámetro a nuestra función, que a su vez nos permitirá inspeccionar su «estado comprobado«.
Declaración de la función «terminos_cambio«, esa función desencadena el controlador de eventos «OnClick» declarado en la casilla.
//Nuestra función personalizada, que se llamará cada vez que
//el usuario hace clic en la casilla de verificación en cuestión.
function terminos_cambio(checkbox){
//Si está marcada ejecuta la condición verdadera.
if(checkbox.checked){
alert('La casilla ha sido marcada!');
}
//Si se ha desmarcado se ejecuta el siguiente mensaje.
else{
alert('La casilla ha sido desmarcada!');
}
}
La función anterior recorre la propiedad «Checked» del elemento DOM que representa la casilla de verificación en la que se ha hecho clic por parte del usuario. Si la propiedad se establece en verdadero (TRUE), significa que se ha marcado la casilla de verificación. Por otro lado, si es falso (FALSE), significa que la casilla de verificación no ha sido marcada por el usuario.
Segunda Forma: Detectar casilla usando jQuery.
Recordemos que el lenguaje jQuery que es una variante mejorada de JavaScript nos puede ayudar a hacer las cosas un poco más simples. Sin embargo, podemos eliminar completamente el controlador de eventos en línea de nuestra casilla de verificación HTML:
<!-- Casilla de verificación CheckBox. --> <input type="checkbox" id="terminos" value="1" />
Usando una función con el método jQuery «.click()«, podemos capturar los cambios de una determinada casilla de verificación. Por lo tanto, podemos observar que trabaja con el identificador del elemento HTML (ID) «términos«, que a su vez será llamada en la función jQuery, veamos un ejemplo.
$('#terminos').click(function(){
if($(this).is(':checked')){
alert('Se ha Marcado la casilla!');
} else {
alert('Nuestra casilla de verificación no está marcada!');
}
});
Explicando el código anterior. Primeramente capturamos el evento click en la casilla de verificación y luego recorremos su estado «Checked» usando la función «.is() «de jQuery. Recordemos que esta función permite comprobar el contenido de un objeto jQuery (en este ejemplo, el objeto seria nuestra casilla de verificación).
CONCLUSIÓN: DETECTAR CHECKBOX MARCADOS JAVASCRIPT
Ya hemos visto la manera de detectar cabios en nuestras casillas de verificación incluso usando dos ejemplos expuestos en este artículo: JavaScript y jQuery.
Tenga en cuenta que el evento «.click» también funcionará si se está utilizando un teclado en lugar de un ratón. Para probar esto, puede pasar a la casilla de verificación en cuestión y, a continuación, presione la tecla SPACE.
Espero que esta breve explicación les ayude con sus proyectos web o páginas web y no se olviden de comentar si tienen alguna duda respecto al script explicado en este artículo.
