 |
Control RADIO con Javascript
Los objetos RADIO tienen sentido cuando disponemos varios elementos. Sólo uno puede estar seleccionado del conjunto.
Ejemplo: Mostrar cuatro objetos de tipo RADIO que permitan seleccionar los estudios que tiene un usuario:
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>
<script>
function mostrarSeleccionado()
{
if (document.getElementById('radio1').checked)
{
alert('no tienes estudios');
}
if (document.getElementById('radio2').checked)
{
alert('tienes estudios primarios');
}
if (document.getElementById('radio3').checked)
{
alert('tienes estudios secundarios');
}
if (document.getElementById('radio4').checked)
{
alert('tienes estudios universitarios');
}
}
</script>
<form>
<input type="radio" id="radio1" name="estudios">Sin estudios
<br>
<input type="radio" id="radio2" name="estudios">Primarios
<br>
<input type="radio" id="radio3" name="estudios">Secundarios <br>
<input type="radio" id="radio4" name="estudios">Universitarios
<br>
<input type="button" value="Mostrar" onClick="mostrarSeleccionado()">
</form>
</body>
</html>
Es importante notar que todos los objetos de tipo RADIO tienen definida la propiedad name con el mismo valor (esto permite especificar que queremos que los radios estén relacionados entre si)
Luego podemos acceder a cada elemento mediante el método getElementById para consultar la propiedad checked:
alert('no tienes estudios');
}
Igual que el checkbox, la propiedad checked retorna true o false, según esté o no seleccionado el control radio.
Otro ejemplo
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.
<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.
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.
Si queremos acceder por ejemplo a la propiedad value del último botón de radio escribimos lo siguiente.
La propiedad length del array de radios nos indica el número de botones de radio que forman parte del grupo.
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.