» Manejo de checkbox con Javascript | Solo Código |

Manejo de checkbox con Javascript

Escrito por J.F. el Thursday, 27 de September del 2007 a las 11:57

Los checkbox o casillas de verificaciÃ³n son unas cajas que permiten marcar o no un elemento. La forma de declararlas en HTML es la siguiente:

TEXTO PLANO

HTML:

<input type="checkbox" name="nombre" value="valor" CHECKED/>

El atributo name es el que usaremos para acceder al checkbox desde Javascript, value serÃ¡ el valor del checkbox y tambiÃ©n puede ser accesible mediante Javascript y por Ãºltimo CHECKED deja marcado por defecto el checkbox al cargar la pÃ¡gina. Si lo quitamos la casilla de verificaciÃ³n aparecerÃ¡ por defecto desactivada. Veamos como podemos comprobar el estado de un checkbox con las diferentes propiedades Javascript:

checked
Informa sobre si determinada caja estÃ¡ marcada o no. Para ello podrÃamos utilizar un cÃ³digo como Ã©ste:

TEXTO PLANO

JavaScript:

if(document.nombre_formulario.nombre_checkbox.checked) {

//AquÃ va el cÃ³digo en caso de que el checkbox

//estÃ© activao. Ej: alert("Checkbox seleccionado");

}

else {

//CÃ³digo en caso contrario

//Ej: alert("Checkbox no marcado");

}

defaultChecked
Comprueba si un checkbox estÃ¡ marcado por defecto(aÃ±adiendo CHECKED en el HTML como vimos mÃ¡s arriba).

value
Como en un campo de texto de un formulario, sirve para acceder al valor del checkbox.

TEXTO PLANO

JavaScript:

alert(document.nommbre_form.nombre_check.value);

Hacer click en un checkbox
Mediante Ã©ste mÃ©todo se puede simular el click sobre el checkbox. PondrÃ© un ejemplo rÃ¡pido y lo entenderÃ¡s:

TEXTO PLANO

HTML:

<html>

<head>

<script>

function hacerClick() {

document.formulario.casilla.click();

}

</script>

</head>

<body>

<form name="formulario">

<input type="checkbox" name="casilla">

<br>

<br>

<input type="button" value="Simular click sobre Checkbox" onclick="hacerClick();">

</form>

</body>

</html>

Situar/retirar el foco
Las funciones ya conocidas, focus() para situar el foco y blur() para retirarlo.

TEXTO PLANO

JavaScript:

document.formulario.casilla.focus();

document.formulario.casilla.blur();

Comentarios (2)

Categoria: HTML,Javascript

Añadir este post a

Del.icio.us -

Meneame -

Digg -

Webeame

2 Comentarios

Entradas relacionadas

Comentario de willian

Realizado el Tuesday, 2 de August del 2011 a las 21:35

hola y si tengo un arreglo de checkbox como hago para validar que un usuario haya seleccionado como maximo 2 ejemplo:

Comentario de willian

Realizado el Tuesday, 2 de August del 2011 a las 21:36

tengo tres checkbox y en la etiqueta name todos tienes nombre[] como valido que solo selecciones 2

Escribir un comentario

Solo Código

Solo Código es una colección de códigos de todo tipo que pueden resultar útiles para el diseño de páginas web. Está enfocado tanto para aquellos que son expertos, como para aquellos principiantes que quieren encontrar recursos útiles, o no saben implementar determinadas funciones en sus webs. No olvides que Solo Código es un blog de Informática Práctica, donde tenemos otras secciones interesantes como:
| Tutoriales | Trucos | Software | Links | Buscar |