Control de Checkbox en Javascript

Valoración del artículo:
Capítulo sobre el control del elemento de formulario tipo checkbox o caja de verificación. Estudiamos sus métodos y propiedades, con ejemplos.
Publicado: 10/12/02
Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
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í.

Comentarios
Fueron enviados 2 comentarios al artículo
1 comentario no revisado
1 comentario revisado:
Por: Victor Monzalvo
07/3/03
Solo quiero comentar que en el código incluido en el articulo, en la funcion alertaValue(), tiene erroneo el método, debiendo ser document.miFormulario.miCheck.value.

Aun asi, el articulo me parecio bueno.

Corregido, muchas gracias


Manuales relacionados
Categorias relacionadas
El autor
Lectura recomendada
Compra este libro en Agapea, la librería urgente a domicilio.
Últimas noticias
Alojados en el grupo