> Manuales > Desarrollo en Javascript del lado del cliente

Capítulo sobre el control del elemento de formulario tipo checkbox o caja de verificación. Estudiamos sus métodos y propiedades, con ejemplos.

Los checkbox son las unas cajas que permiten marcarlas o no para verificar alguna cosa en un formulario. Podemos ver 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.

Con Javascript, a partir de la jerarquía de objetos del navegador, 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.

Para ilustrar el funcionamiento de las 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>

Puede verse la página en funcionamiento aquí.

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online Escu...

Manual