Control de botones de radio en Javascript

  • Por
Explicación sobre el manejo de radio buttons en Javascript. Lista de métodos y propiedades junto con algún ejemplo de su funcionamiento.

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.

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

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

juan

04/11/2005
he estado realizando el prensente ejercicio y compruebo en en Explores funciona correctamente pero no en Firefox.

A que se puede deber?

Marc

15/10/2007
A mi me funciona con los dos, aunque llovió mucho desde el mensaje anterior.<br />
<br />
Yo lo que encontré más curioso es lo siguiente:<br />
<br />
&quot;Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.&quot;<br />
<br />
Da incluso ganas de reir. Un trozo de código tan simple y ridículo y es copyright de desarrolloweb? ... jajaja. A ver quien es el guapo que reclama derechos de copyright para cada página en la que se accede a los valores de un radio ... es ridículo.

Raul Morales Ferrer

21/11/2007
Para que funcione en Firefox agrega la propiedad &quot;id&quot; con el mismo nombre que la propiedad &quot;name&quot; a todos los inputs tipo radio. <br />
<br />
&lt;input type=&quot;Radio&quot; name=&quot;colorin&quot; id=&quot;colorin&quot; value=&quot;ffffff&quot; checked&gt;<br />
<br />
En realidad no se a que se debe pero a mi me funcionó en firefox... si alguien puede explicarnos porque se lo agradecería...<br />
<br />

Julissa

15/1/2008
hola:<br />
<br />
En el ejemplo de los colores, aunque no es un error gravísimo, lo considero importante para brindar un buen ejemplo a los demás usuarios de este manual.<br />
Los colores verde y turquesa tienen el mismo value, por lo tanto al presionar el turquesa, uno de mis colores favoritos, me di con la sorpresa que salía el color verde nuevamente.<br />
<br />
Espero lo puedan corregir<br />
Gracias.

pumaMedicina

29/2/2008
Se que no es foro pero en relación al comentario anterior yo tengo el siguiente codigo:<br />
<br />
//creo el radio buton <br />
var radioBoton = document.createElement(&#039;input&#039;);<br />
radioBoton.type = &#039;radio&#039;;<br />
radioBoton.name = &#039;grupo&#039;;<br />
radioBoton.value = variable_grupo;<br />
<br />
//creo una celda de una tabla<br />
var c1 = document.createElement(&#039;td&#039;);<br />
//creo un nodo de texto y lo pego en la celda<br />
var txt_c1 = document.createTextNode(&#039;&#039;);<br />
c1.appendChild(txt_c1);<br />
//inserto el radio boton dentro de la celda<br />
c1.insertBefore(radioBoton,txt_c1);<br />
<br />
//lo anterior esta dentro de un for y cuando termino de insertar todos elijo el primero y le pongo el checked = true<br />
var l_radios = document.getElementsByTagName(&#039;input&#039;);<br />
l_radios[0].checked = true;<br />
<br />
//y en firefox funciona muy bien pero en IE7 no y no tengo idea porque lo que sucede es que en ambos se dibuja bien pero en el explorer no puedo cambiar el valor de los radio buttons.

Jorge Bermudez

01/7/2010
Agradecimiento
Gracias por el articulo.

thundercat182

03/7/2010
enserio es propiedad de desarrolloweb.com este codigo?
osea es broma no?

dprograma

02/5/2013
Agradecimiento
Un artículo que tiene sus años, pero me ayudó. Gracias.