manuales - recursos - gráficos - programación...
CAMINANDO ENTRE FORMULARIOS (III)
por Luciano Moreno, del departamento de diseño web de BJS
Software.
Los objetos CHECKBOX Y RADIO.-
Los elementos de formulario Checkbos y Radio realizan una
función parecida en este: permitir que el usuario elija opciones en un grupo de
varias, pero mientras que en un conjunto de Checkbox puede elegir varias de las
opciones, en un conjunto de Radios sólo puede elegir una de ellas. La forma de incluir ambos objetos en un formulario
también es diferente. Para incluir un grupo de Checkbox la sintaxis sería:
<INPUT TYPE =" Checkbox" NAME="nombre_1" VALUE="valor_asociado">texto asociado al checbox 1
<INPUT TYPE =" Checkbox " NAME= "nombre_2" VALUE=" valor_asociado">texto asociado al checbox 2
cuyo resultado es:
mientras que para incluir un grupo de Radios tendríamos que escribir:
<INPUT TYPE = " Radio" NAME= " nombre" VALUE="valor_1">texto
asociado al radio 1
<INPUT TYPE = " Radio" NAME = "nombre"
VALUE=" valor_2">texto asociado al radio 2
y su resultado es:
Para más información sobre estos elementos visitar el Manual de HTM de este mismo
sitio.
Las principales propiedades de estos objetos son:
- name : es la
propiedad que va a asignar a cada checkbox o radio un nombra identificador
para poder referirnos luego a él y acceder a sus propiedades. La diferencia
entre ambos tipos es que en el caso de un
grupo de radio botones todos deben tener el mismo name, ya que si no es así el efecto de selección única se pierde.
El acceso a un radio
o checkbos se efectúa de
forma análoga a lo visto
en el caso de los objetos TEXT.
- value: esta propiedad asocia un valor a cada checkbox o radio, y en el caso de
los checkbox es útil cuando queremos asociar a un único name varios posibles valores,
pero a veces es mejor emplear un name diferente para cada checkbox, como en el caso de
que queramos acceder mediante JavaScript separadamente a las propiedades de cada uno de ellos,
siendo en estos casos el atributo value poco útil. En el caso de los radio botones es una propiedad necesaria siempre,
ya que va a ser la que distinga un radio de los demás, al tener todos el mismo name. Pero desde el punto de
vista de su tratamiento con JavaScript, esta propiedad no es muy útil.
- disabled :
esta propiedad bloquea la caja del checkbox o el botón de radio de tal forma que el campo se colorea
de color grís y no se puede accionar el mismo.
Vamos a ver su sintaxis mediante un ejemplo, en el que vamos a ver cómo se accede a esta propledad
en ambos objetos, empleando para ello el array forms[index]:
<HTML>
<HEAD>
</HEAD>
<SCRIPT LANGUAGE =
" JavaScript " >
function desab( i ) {
document.forms[i].caja.disabled=true;
}
function hab(i) {
document.forms[i].caja.disabled=false;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME = "form1" >
<INPUT TYPE = "Checkbox" NAME = "caja" VALUE =
"a">
<INPUT TYPE = "button" VALUE = "desabilita" ONCLICK = "desab(0)">
<INPUT TYPE = "button" VALUE = "habilita" ONCLICK = "hab(0)">
</FORM>
<FORM NAME =
"form2" >
<INPUT TYPE = "Radio" NAME = "caja" VALUE = "a">
<INPUT TYPE = "button" VALUE =
"desabilita" ONCLICK = "desab(1)">
<INPUT TYPE =
"button" VALUE = "habilita" ONCLICK = "hab(1)">
</FORM>
</BODY>
</HTML>
que vemos en funcionamiento en el siguiente
ejemplo.
- checked : la
propiedad checked marca o comprueba si está marcado un checkbox o un radio
botón, y es una propiedad booleana, es decir, vale true
si el objeto está marcado y false si no lo está. Vamos a ver en el
siguiente ejemplo cómo podemos acceder a esta propiedad en todo un conjunto de
checkbox, consiguiendo con ello marcar y desmarcar todos a la vez. El código es:
<html>
<head>
<script language="JavaScript" type="text/javascript">
function marcar() {
for (i=0; i<document.form1.caja.length; i++)
document.form1.caja[i].checked=true;
}
function desmarcar(i) {
for (i=0; i<document.form1.caja.length; i++)
document.form1.caja[i].checked=false;
}
</script>
</head>
<body >
<form name="form1">
<input type="Checkbox" name="caja" value="1">
<input type="Checkbox" name="caja" value="2">
<input type="Checkbox" name="caja" value="3">
<input type="Checkbox" name="caja" value="4">
<input type="Checkbox" name="caja" value="5">
<input type="button" value="todos" onClick="marcar()">
<input type="button" value="ninguno" onClick="desmarcar()">
</form>
</body>
</html>
cuyo resultado muestra la siguiente ventana.
- length : esta
propiedad nos devuelve el número de radio botones que
existe en un grupo determinado de ellos que tienen el mismo atributo name. El
siguiente código refleja su uso:
<html>
<head>
</head>
<body>
<form
name="form1">
<center>
<INPUT TYPE = "Radio" NAME= "nombre"
VALUE="valor_1">texto asociado al radio 1
<INPUT TYPE = "Radio" NAME
= "nombre" VALUE=" valor_2">texto asociado al radio
2<br><br>
<input type="button" value="?cuantos radios?"
onClick="alert('hay '+document.form1.nombre.length+'
botones')">
</center>
</form>
</body>
</html>
que podemos apreciar en la siguiente ventana.
- index : que es un array que contiene en su interior todos los radio botones
que hay en un grupo de ellos con el mismo nombre. Así, si tenemos por ejemplo un grupo de
3 radios llamados "equipo" y con diferente value cada uno, para referirnos al segundo de ellos
deberemos usar la expresión:
document.forms.nombre_formulario.equipo[1]
ya que el array index comienza en cero.
Por otra parte, estos objetos poseen los siguientes eventos:
- onFocus : este
evento permite lanzar una acción cuando el checkbox
o el radio botón recibe el foco, es decir, cuando el usuario pincha con el
ratón en ellos o cuando accede a ella mediante el tabulador del teclado. Un ejemplo
de llamada al método sería:
<INPUT TYPE = " checbox" NAME =
" campo1 " ONFOCUS = " alert ( ' foco en el checkbox' ) " >
- onBlur : mediante este evento
podemos ejecutar una acción dada cuando el elemento pierde el foco, bien porque el
usuario trás marcarlo pinche en otra parte de la página o bien cuando accede a otro
campo del formulario mediante el tabulador. Su uso pasa por usar una sintaxis
del tipo:
<INPUT TYPE = " radio" NAME = " campo1 " ONBLUR =
" alert ( ' foco fuera del radio botón' ) " >
- onClick : su
efecto es el mismo que el del evento onFocus, por lo que su uso es análogo,
siendo la única diferencia entre ellos que para
hacer que salte el evento onclick es necesario pinchar en el elemento, no activándose si accedemos a
él mediante el tabulador.
vamos a ver su uso práctico mediante el siguiente código, que hace ue al pinchar un radio
botón aparezca un texto en una caja:
<html>
<head>
</head>
<body
bgcolor="#ffffcc">
<form name="form1">
pincha en el
radio...<input type= "radio"onclick="document.form1.campo.value='?hola, que
tal?'">
<input type="text"
name="campo">
</form>
</body>
</html>
cuyo resultado podemos ver en este ejemplo.
- onChange :
evento se lanza cuando el estado marcado-desmarcado se cambia. Su escritura se debe parecer
a:
<INPUT TYPE = " radio" NAME = " nombre" ONCHANGE = "
alert ( ' lo que sea' ) " >
pero su uso
no reporta muchas aplicaciones prácticas.
- onMouseOver ,
onmouseOut, ondblClick, onkeyPress : estos dos eventos son aceptados por ambos
objetos, aunque su aplicación práctica es nula, ya que causa más molestias
que ventajas.
 |
|
 |
Home - Articulos JavaScript -
Caminando entre formularios - 1 - 2 - 3
- 4 - 5 - 6 - 7 - 8
