Control de botones de radio en Javascript
Anuncio
Control de botones de radio en Javascript
El botón de radio (o radio button en inglés) es un elemento de formulario que
permite seleccionar una opción y sólo una, sobre un conjunto de posibilidades. Se
puede ver a continuación.
Blanco
Rojo
Verde
Nota: En la parte de arriba podemos ver tres radio buttons en lugar de uno solo. Se colocan
tres botones porque así podemos examinar su funcionamiento al formar parte de un grupo.
Veamos que al seleccionar una opción se deselecciona la opción que estuviera marcada antes.
Se consiguen con la etiqueta <INPUT type=radio>. Con el atributo NAME de la
etiqueta <INPUT> les damos un nombre para agrupar los radio button y que sólo se
pueda elegir una opción entre varias. Con el atributo value indicamos el valor de
cada uno de los radio buttons. El atributo checked nos sirve para indicar cuál de los
radio butons tiene que estar seleccionado por defecto.
Referencia: Explicamos en detalle la creación de botones de radio en nuestro manual de
HTML, en el capítulo Otros elementos de formularios.
Cuando en una página tenemos un conjunto de botones de radio se crea un objeto
radio por cada uno de los botones. Los objetos radio dependen del formulario y se
puede acceder a ellos por el array de elements, sin embargo también se crea un
array con los botones de radio. Este array depende del formulario y tiene el mismo
nombre que los botones de radio.
Propiedades del objeto radio
Veamos una lista de las propiedades de este elemento.
checked
Indica si está chekeado o no un botón de radio.
defaultChecked
Su estado por defecto.
value
El valor del campo de radio, asignado por la propiedad value del radio.
Length (como propiedad del array de radios)
El número de botones de radio que forman parte en el grupo. Accesible en el vector
de radios.
Métodos del objeto radio
Son los mismos que los que tenía el objeto checkbox.
Ejemplo de utilización
Veamos con un ejemplo el método de trabajo con los radio buttons en el que vamos
a colocar un montón de ellos y cada uno tendrá asociado un color. También habrá un
botón y al pulsarlo cambiaremos el color de fondo de la pantalla al color que esté
seleccionado en el conjunto de botones de radio.
Vamos a ver la página entera y luego la comentamos.
<html>
<head>
<title>Ejemplo Radio Button</title>
<script>
function cambiaColor(){
var i
for (i=0;i<document.fcolores.colorin.length;i++){
if (document.fcolores.colorin[i].checked)
break;
}
document.bgColor = document.fcolores.colorin[i].value
}
</script>
</head>
<body>
<form name=fcolores>
<input type="Radio" name="colorin" value="ffffff" checked> Blanco
<br>
<input type="Radio" name="colorin" value="ff0000"> Rojo
<br>
<input type="Radio" name="colorin" value="00ff00"> Verde
<br>
<input type="Radio" name="colorin" value="0000ff"> Azul
<br>
<input type="Radio" name="colorin" value="ffff00"> Amarillo
<br>
<input type="Radio" name="colorin" value="00ff00"> Turquesa
<br>
<input type="Radio" name="colorin" value="ff00ff"> Morado
<br>
<input type="Radio" name="colorin" value="000000"> Negro
<br>
<br>
<input type="Button" name="" value="Cambia Color" onclick="cambiaColor()">
</form>
</body>
</html>
Primero podemos fijarnos en el formulario y en la lista de botones de radio. Todos se
llaman "colorin", así que están asociados en un mismo grupo. Además vemos que el
atributo value de cada botón cambia. También vemos un botón abajo del todo.
Con esta estructura de formulario tendremos un array de elements de 9 elementos,
los 8 botones de radio y el botón de abajo.
Además tendremos un array de botones de radio que se llamará colorín y depende
del formulario, accesible de esta manera.
document.form.colorin
Este array tiene en cada posición uno de los botones de radio. Así en la posición 0
está el botón del color blanco, en la posición 1 el del color rojo... Para acceder a esos
botones de radio lo hacemos con su índice.
document.fcolores.colorin[0]
Si queremos acceder por ejemplo a la propiedad value del último botón de radio
escribimos lo siguiente.
document.fcolores.colorin[7].value
La propiedad length del array de radios nos indica el número de botones de radio
que forman parte del grupo.
document.fcolores.colorin.length
En este caso la propiedad length valdrá 8.
Con estas notas podremos entender más o menos bien la función que se encarga de
encontrar el radio button seleccionado y cambiar el color de fondo de la página.
Se define una variable en la que introduciremos el índice del radio button que
tenemos seleccionado. Para ello vamos recorriendo el array de botones de radio
hasta que encontramos el que tiene su propiedad checked a true. En ese momento
salimos del bucle, con lo que la variable i almacena el índice del botón de radio
seleccionado. En la última línea cambiamos el color de fondo a lo que hay en el
atributo value del radio button seleccionado.
Podemos ver ese ejemplo en funcionamiento.
Referencia: Si deseamos profundizar el el control de botones de radio podemos acceder a un
taller relacionado: Inhibir radio button con Javascript
Informe de Miguel Angel Alvarez*