Botones de radio en Javascript

Explicación sobre el manejo de radio buttons en Javascript. Lista de métodos y propiedades.

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>

Usuarios que han visto este tema también han visto...

- Una Base de Datos sencilla, con ActiveX y JavaScript
- Objetos en JavaScript
- Sonido con Javascript
- Contador falso en JavaScript
- Obtener el elemento activo de un formulario con JavaScript

- Versión imprimible de este documento

- Enviar por e-mail este documento