Cómo realizar el control del elemento de formulario tipo checkbox o caja de verificación. Estudiamos los métodos y propiedades de los elementos checkbox, con algunos ejemplos.
Los checkbox son uno de los elementos de formulario de HTML. Consiste en unas cajas que permiten marcarlas o no para verificar alguna cosa en un formulario. Podemos ver el aspecto de una caja checkbok a continuación.
Los checkbox se consiguen con la etiqueta <INPUT type="checkbox">.
- Con el atributo NAME de la etiqueta INPUT le podemos dar un nombre para luego acceder a ella con javascript.
- Con el atributo CHECKED indicamos que el campo debe aparecer chequeado por defecto.
- El atributo CHECKED es boleano. Si colocamos ese atributo indica que el elemento estará chequeado inicialmente, si el atributo no se encuentra en la etiqueta el elemento aparecerá desmarcado.
Con Javascript, a partir de la jerarquía de objetos del navegador, el DOM, tenemos acceso al checkbox, que depende del objeto form del formulario donde está incluido.
Propiedades de un checkbox
Las propiedades que tiene un checkbox son las siguientes.
checked
Informa sobre el estado del checkbox. Puede ser true o false.
defaultChecked
Si está chequeada por defecto o no.
value
El valor actual del checkbox.
También tiene las propiedades form, name, type como cualquier otro elemento de formulario.
Métodos del checkbox
Veamos la lista de los métodos de un checkbox.
click()
Es como si hiciésemos un click sobre el checkbox, es decir, cambia el estado del checkbox.
blur()
Retira el foco de la aplicación del checkbox.
focus()
Coloca el foco de la aplicación en el checkbox.
Ejemplo práctico del manejo de checkboxes
Para ilustrar el funcionamiento de las casillas checkbox vamos a ver una página que tiene un checkbox y tres botones. Los dos primeros para mostrar las propiedades checked y value y el tercero para invocar a su método click() con objetivo de simular un click sobre el checkbox.
<html>
<head>
<title>Ejemplo Checkbox</title>
<script>
function alertaChecked(){
alert(document.miFormulario.miCheck.checked);
}
function alertaValue(){
alert(document.miFormulario.miCheck.value);
}
function metodoClick(){
document.miFormulario.miCheck.click();
}
</script>
</head>
<body>
<form name="miFormulario" action="mailto:promocion@guiarte.com" enctype="text/plain">
<input type="checkbox" name="miCheck">
<br>
<br>
<input type="button" value="informa de su propiedad checked" onclick="alertaChecked()">
<input type="button" value="informa de su propiedad value" onclick="alertaValue()">
<br>
<br>
<input type="button" value="Simula un click" onclick="metodoClick()">
</form>
</body>
</html>Para entender este acceso a las propiedades del checkbox tienes que apreciar que el formulario se llama "miFormulario". Este nombre se asigna en el atributo "name" de la etiqueta FORM.
Como el checkbox depende del formulario, podemos llegar a él mediante Javascript por medio de su nombre, nuevamente el atributo "name" pero esta vez del elemento "input checkbox". El name del elemento se indica con name="miCheck".
Otro medio de acceder a un elemento checkbox, mediante su id
Ahora vamos a ver un segundo ejemplo de manejo de elementos checkbox en Javascript. Es algo muy sencillo. Simplemente queremos mostrar el estado inicial de una casilla de verificación y, cuando se haga clic, mostrar el estado actual.
La gracia de este ejercicio es que te presenta una nueva manera de acceder a los elementos de formulario, que es más sencilla todavía que la anterior, porque solamente necesitamos saber el "id" del checkbox.
Este ejercicio se basa en que Javascript tiene un método de acceso directo a cualquier elemento del DOM (Document Object Model). Este método depende del objeto document y se llama document.getElementById(). Con este método podemos acceder a una casilla checkbox, pero también a cualquier otro elemento de la página, como un "div".
Veamos el código del ejemplo y lo comentamos a continuación.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>checkbox por id</title>
</head>
<body>
<input type="checkbox" id="miElementoCheckbox">
<div id="msg"></div>
<script>
var miCheckbox = document.getElementById('miElementoCheckbox');
var msg = document.getElementById('msg');
alert('El valor inicial del checkbox es ' + miCheckbox.checked);
miCheckbox.addEventListener('click', function() {
if(miCheckbox.checked) {
msg.innerText = 'El elemento está marcado';
} else {
msg.innerText = 'Ahora está desmarcado';
}
});
</script>
</body>
</html>
La parte interesante que comentábamos, del acceso al DOM la hacemos con las siguientes líneas:
var miCheckbox = document.getElementById('miElementoCheckbox');
var msg = document.getElementById('msg');
Hemos accedido al campo checkbox y a un div a través de sus atributos id. El elemento en sí, el objeto Javascript que lo representa, lo hemos guardado en su correspondiente variable.
Posteriormente puedo acceder a cualquier método o propiedad del elemento a través de la variable donde la hemos guardado.
miCheckbox.checked
Esa propiedad nos dirá si el elemento checkbox está o no marcado en ese instante.
Manejadodes de eventos en el checkbox con addEventListener
Quizás otra parte que merezca la pena comentar es cómo hemos asignado un manejador de evento al checkbox:
miCheckbox.addEventListener('click', function() {
//
})
Una vez que tenemos un elemento del DOM cualquiera, podemos usar su método addEventListener para asociar manejadores de eventos. En este caso estamos definiendo un manejador para el evento "click", es decir, un código de una función que se ejecutará siempre que se haga clic.
Ahora, con este código que encuentras dentro del manejador de evento:
if(miCheckbox.checked) {
msg.innerText = 'El elemento está marcado';
} else {
msg.innerText = 'Ahora está desmarcado';
}
Simplemente estamos comprobando el estado del checkbox para cambiar el texto que hay dentro del elemento "msg" (el DIV que habíamos accedido a través de su id anteriormente), colocando un texto dependiendo de si está marcado o no el checkbox.
Eso es todo! esperamos que estos ejempos de control de los checkboxes en Javascript te hayan servido para aprender a manejar estos campos de formulario.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...