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 unname 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 radiobuttons 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>
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;
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;
form.intereses[1].disabled = true;
form.intereses[2].disabled = true;
}
}
</script>
</script>
El Formulario...
<form name="ejemplo2">
¿Desea suscribirse a nuestro boletín de novedades? <input type="checkbox" name="boletin" value="ON" checkedonClick="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>
Fuente:enlace
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros
Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve para más información
No hay comentarios:
Publicar un comentario