> Manuales > Formularios y Javascript

Propiedades, eventos y ejemplos de estos objetos contenidos en formularios.

12.1 Propiedades de los objetos

 

propiedad descripción

name

Es el nombre que identifica a un checkbox a un grupo de radio buttons. Para que éstos últimos conserven la capacidad de selección única, deben tener todos el mismo nombre.

value

Es un valor asociado a cada checkbox o radio.

 

En el caso de los checkbox es útil asignar a un grupo de éstos con el mismo name distintos valores. Pero si se quieres acceder a las propiedades de cada checkbox separadamente mediante JavaScript, es mejor utilizar un name diferente para cada checkbox, ya que de lo contrario (si todos tienen el mismo name) la propiedad value resulta poco útil.

 

En el caso de los radio buttons es una propiedad necesaria siempre al tener todos el mismo name,  aunque para su acceso mediante JavaScript, esta propiedad no es muy útil.

disabled

bloquea el checkbox o radio. Por lo tanto "No es enviado en el formulario" y "actúa como si no existiese".

checked

marca o comprueba si está marcado un checkbox o un radio. Es una propiedad booleana (que solo admite verdadero o falso) en la cual su valor será "true" (verdadero) si el objeto está marcado y "false" (falso) en caso que no lo esté.

length

es la cantidad de radio buttons que existe en un grupo determinado con el mismo name.

index array que contiene todos los radio buttons que hay en un grupo con el mismo nombre. Para un grupo de 5 radio buttons con mismo nombre y diferente valor cada uno, para referirnos al cuarto de ellos se debe usar la sintaxis:

 

formulario.nombre_radio[3]

 

 

12.2 Principales eventos

 

evento descripción

onFocus

Permite realizar una acción al poner el foco en el objeto.

onBlur Permite realizar una acción cuando el foco ya no se encuentra en el objeto.
onClick Permite realizar una acción cuando se hace click sobre el objeto.
onChange Evento que se produce al marcar/desmarcar un checkbox o un radio button.

 

12.3 Sintaxis básica

Para un grupo de radio buttons (mismo nombre distinto valor)

 

<input type="radio" name="color" value="rojo">

<input type="radio" name="color" value="verde">

 

Para un grupo de checkbox (mismo nombre distinto valor)

 

<input type="checkbox" name="colores" value="rojo">

<input type="checkbox" name="colores" value="verde">

 

12.3 Ejemplos de aplicación I: Trabajando con la propiedad disabled

Ejemplo #1

En este caso se habilitarán o deshabilitarán los checkbox dependiendo de la opción que seleccione el usuario de un grupo de dos radio buttons.


 

El Script...

 

<script languaje="javascript">

function habilita(form)

{
form.intereses[0].disabled = false;
form.intereses[1].disabled = false;
form.intereses[2].disabled = false;
}

function deshabilita(form)
{
form.intereses[0].disabled = true;
form.intereses[1].disabled = true;
form.intereses[2].disabled = true;
}
</script>

 

El Formulario...

 

<form name="ejemplo1">

¿Desea suscribirse a nuestro boletín de novedades? <br>

<input type="radio" name="boletin" value="si" checked onClick="habilita(this.form)"> SI, quiero suscribirme.

<input type="radio" name="boletin" value="no" onClick="deshabilita(this.form)"> No, gracias.

<br><br>

Seleccione los temas de su interés:<br>

<input type="checkbox" name="intereses" value="Arte y Cultura"> Arte y Cultura<br>

<input type="checkbox" name="intereses" value="Ciencia">Ciencia<br>

<input type="checkbox" name="intereses" value="Música">Música<br>

</form>

 

Los resultados...

¿Desea suscribirse a nuestro boletín de novedades?

SI, quiero suscribirme. No, gracias.


Seleccione los temas de su interés:
Arte y Cultura
Ciencia
Música

 

Ejemplo #2

En este caso se habilitarán o deshabilitarán los checkbox dependiendo del valor de la propiedad checked de otro checkbox.


 

El Script...

 

<script languaje="javascript">

function habilitaDeshabilita(form)

{

    if (form.boletin.checked == true)

    {

    form.intereses[0].disabled = false;
    form.intereses[1].disabled = false;
    form.intereses[2].disabled = false;

    }

 

    if (form.boletin.checked == false)

    {

    form.intereses[0].disabled = true;
    form.intereses[1].disabled = true;
    form.intereses[2].disabled = true;

    }

 

}
</script>

 

El Formulario...

 

<form name="ejemplo2">

¿Desea suscribirse a nuestro boletín de novedades? <input type="checkbox" name="boletin" value="ON" checked onClick="habilitaDeshabilita(this.form)"> SI, quiero suscribirme.

<br><br>

Seleccione los temas de su interés:<br>

<input type="checkbox" name="intereses" value="Arte y Cultura"> Arte y Cultura<br>

<input type="checkbox" name="intereses" value="Ciencia">Ciencia<br>

<input type="checkbox" name="intereses" value="Música">Música<br>

</form>

 

Los resultados...

¿Desea suscribirse a nuestro boletín de novedades? SI, quiero suscribirme.

Seleccione los temas de su interés:
Arte y Cultura
Ciencia
Música

 

Eugenia Bahit

Analista Programadora LAMP y Scrum Coach

Manual