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

Manejo de checkbox con Javascript

Escrito por J.F. el Jueves, 27 de Septiembre 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();

Categoria: HTML, Javascript

Añadir este post a

Del.icio.us -

Meneame -

Digg -

Webeame

No hay comentarios

Entradas relacionadas

Deja un comentario

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 |