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...
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...
Eugenia Bahit
Analista Programadora LAMP y Scrum Coach