Spanish
Sign in / Sign up

Javascript Objeto Casilla de Verificación

Como cambiar la selección en un checkbox usando javascript?
O
cuáles son los eventos asociados con checkbox?

Explicación

Básico HTML forma casilla de verificación
Checkbox Object :
La siguiente sintasis podrá tomar el objeto checkbox en javascript
Sintasis: document.formname.checkboxname
Código Ejemplo:
<form name=testform>
<input name=cb1 value=test type=checkbox>
<input name=cb2 value=test2 type=checkbox>
</form>
<script language="javascript">
var cbobject= document.testform.cb1;
</script>

El objeto cbobject es un array de un elemento check box. Para usar el primer check box, tenemos que llamar a cbobject[0], para el segundo box será cbobject[1] y así sucesivamente. Aquí los eventos, propieresp_codedes dom y métodos asociados con elementos checkbox.
Captadores de Eventos: Asociados con la forma Cajilla de verificación:
Todos los ejemplos debajo citados usan una función javascript output
<script language=javascript>
function output()
{
alert("testeando evento checkbox");
}
</script>
Tratante de acontecimiento Descripción Ejemplo
onMouseOver Esta se invoca cuando el ratón se mueve sobre la casilla de verificación <input type=checkbox onMouseOver="output()">
Resulta: CB1
onMouseDown Esta se invoca cuando se pulsa el ratón sobre la casilla de verificación <input type=checkbox onMouseDown="output()">
Resulta: CB1
onMouseUp Esta se invoca cuando se pulsa el ratón sobre la casilla de verificación y liberados <input type=checkbox onMouseUp="output()">
Resulta: CB1
onClick onClick se invoca cuando un clic del ratón se realiza en la casilla de verificación <input type=checkbox onClick="output()">
Resulta: CB1
onBlur Ejecuta código en la casilla de verificación cuando se pierde el foco using tab <input type=checkbox onBlur="output()">
Resulta: CB1
onFocus Ejecuta código en la casilla de verificación cuando recibe el foco using tab <input type=checkbox onFocus="output()">
Resulta: CB1

DOM Propieresp_codedes:
Listado de porpieresp_codedes DOM (Dinámico Objeto Modelo) utilizaresp_codes para tomar y alterar las propieresp_codedes del checkbox en javascript.
Ejemplos basados en el formulario (form):
<form name=testb>
<input name=mycb type=checkbox value=111> cajilla1
<input name=mycb type=checkbox value=222> cajilla2
</form>

DOM Propieresp_codedes Descripción Ejemplo
checked Se utiliza para seleccionar casilla de verificación o comprobación. Caresp_code elemento tiene que ser controlados individualmente. El elemento seleccionado volverá más cierto falso. To Check:
var ss = document.testb.mycb[0].checked;
var ss1 = document.testb.mycb[1].checked;
To Select:
document.testb.mycb[0].checked = true;
defaultChecked Se utiliza para comprobar si la casilla de verificación está seleccionado por defecto To Get:
var ss = document.testb.mycb[0].defaultChecked;
form Se utiliza para obtener el nodo padre (forma objeto) de esta casilla de verificación To Get:
var ss = document.testb.mycb[0].form;
name Se utiliza para obtener casilla nombre To Get:
var ss = document.testb.mycb[0].name;
type Se utiliza para obtener tipo de formulario To Get:
var ss = document.testb.mycb[0].type;
value Utiliza para configurar u obtener casilla valor To Get:
var ss = document.testb.mycb[0].value;
To Set::
document.testb.mycb[0].value = "testy";

DOM Métodos:
Listado de Métodos DOM (Dynamic Object Model) usados para realizar cambios dinámicos como dynamic check box selección, usando javascript.
DOM Método Descripción Ejemplo
click() Se utiliza para hacer una casilla de verificación dinámica marcaresp_code To Click:
document.testb.mycb.click();
blur() Se utiliza para hacer dinámica la casilla de verificación borroso To Blur:
document.testb.mycb.blur();
focus() Se utiliza para obtener dinámicamente centrarse en la casilla de verificación To Focus:
document.testb.mycb.focus();

Ejemplo: Realizando un Check Box Select en Mouse Over
<script language=javascript>
function cbevent()
{
var xx = document.xx.cbtest;
xx.checked = true;
}
</script>

<form name=xx>
<input type=checkbox name=cbtest onMouseOver="cbevent()"> Chequeando
</form>

Resulta:
Chequeando

AnteriorSiguiente

Java-Script Tutoriel