 |
|
|
|
|
|
Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS | |
||
|
||||
|
|
|||
 |
|
 |
||
|
||||
Control de Checkbox en Javascript
Capítulo sobre el control del elemento de formulario tipo checkbox o caja de verificación. Estudiamos sus métodos y propiedades, con ejemplos.
10/12/02 - 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í.
+ 1 categoria relacionada
+ 1 comentario (Añadir)
| Autoría, licencia y acciones sobre este artículo | ||||||
|
Informe de Miguel Angel Alvarez*
Director de DesarrolloWeb.com URL: http://www.desarrolloweb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo.
|
| Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar. |
| Se muestra un comentario revisado |
Aun asi, el articulo me parecio bueno.
Corregido, muchas gracias
 | Añadir un comentario del artículo |
| Enlaces: |
| Maestrosdelweb |
Ir arriba
Lectura recomendada  Compra este libro en Agapea, la librería urgente a domicilio. |
||||||||
Tienda DesarrolloWeb
