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.

HTML para generar botones de radio

Aunque en este artículo nos interesa especialmente a trabajar con los botones de radio desde Javascript, queremos dejar claras un par de reglas del HTML para crear los botones de radio.

• Se consiguen con la etiqueta <input type=radio>.
• Con el atributo name de la etiqueta <input> les asignamos un nombre, que nos permite agrupar los radio button.
• Al tener el mismo name se consigue que sólo se pueda elegir una opción entre varias, dentro de ese grupo de botones de radio.
• 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.

Objetos radio en Javascript

Ahora vamos dar una pequeña referencia de lo que podemos encontrar en Javascript para cada uno de los objetos de radio que crea el navegador en el DOM. Por medio de estas propiedades y métodos podemos manipular los objetos de radio dinámicamente.

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

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 en Javascript.

Trabajo con botones de radio y Javascript

En Javascript accedemos a los elementos de la página mediante el DOM, que es una jerarquía de objetos que modelan cada uno de los elementos del HTML, es decir, las etiquetas que tiene una web.

Existen diversos modos de acceso a los elementos del DOM. De hecho, a medida que Javascript ha ido evolucionando, se han ido incorporando más métodos de acceso al DOM, por lo que existe una variedad de posibilidades de acceder a los botones de radio. En este artículo te vamos a explicar algunas de ellas, para que no tengas problemas por entender unos y otros métodos de trabajo con radio buttons en Javascript.

Método moderno de acceso al valor de los radio buttons con Javascript

Comenzamos por explicar el método más moderno, que es también el más directo de conseguir acceder a los botones de radio y saber cuál es el que está marcado.

Comenzamos viendo cómo acceder mediante el método querySelector que permite acceder a un objeto del DOM a través de un selector de los que usamos en CSS.

Vamos a partir de este HTML con una serie de botones de radio:

<input type="radio" name="status" value="interesado" id="interesado"> <label for="interesado">Estoy interesado</label> 
<br>
<input type="radio" name="status" value="indeciso" id="indeciso"> <label for="indeciso">Estoy indeciso</label> 
<br>
<input type="radio" name="status" value="no_interesado" id="no_interesado"> <label for="no_interesado">No me interesa</label> 

Los botones de radio tienen todos el valor name="status", por tanto podremos acceder al valor actual mediante este código:

valorActivo = document.querySelector('input[name="status"]:checked').value;

Sin embargo, esto tiene un problema y es que puede que un elemento no esté activo, en cuyo caso no se podría acceder al value de un null, puesto que sería un error en tiempo de ejecución.

Así pues, siendo un poco más cuidadosos podríamos tener un código como este:

let elementoActivo = document.querySelector('input[name="status"]:checked');
if(elementoActivo) {
    alert(elementoActivo.value);
} else {
    alert('No hay ninún elemento activo');
}

Método moderno para seleccionar un botón de radio con Javascript

Ahora vamos a ver cómo setear una opción determinada en un campo input radio. Para eso vamos a usar de nuevo un método moderno, basado en el método querySelectorAll().

El problema o la dificultad de marcar una opción determinada de los botones de radio es que tenemos varios elementos en la página, cada uno de los que forma el grupo. Por ello no es simplemente acceder a un objeto y marcarlo como checked, sino que tendremos que recorrer el conjuno de los botones de radio para encontrar el que nos interesa y entonces chequearlo.

Para facilitar este trabajo vamos a presentar una función que se encarga de realizar este proceso y podrás reutilizar allá donde lo necesites.

function setRadio(name, value) {
    document.querySelectorAll(`input[name="${name}"]`).forEach(element => {
        if(element.value === value) {
            element.checked = true;
        }
    });
}

Esta función se encarga de recibir dos parámetros:

• El nombre de los botones que deseas setear (el atributo name).
• El valor del input radio que se debe marcar como seleccionado

En el cuerpo de la función recorremos los botones de radio, seleccionando el que debería marcarse como activo. Para ello simplemente modificamos el valor de la propiedad checked del elemento que tiene el valor (value) que debe ser marcado.

Para que quede constancia, voy a dejar el código completo de una página que usa estos dos mecanismos de acceso y manipulación de los botones de radio con Javascript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Acceso a botones de radio con Javascript</title>
</head>
<body>
    <p>
        <input type="radio" name="status" value="interesado" id="interesado"> <label for="interesado">Estoy interesado</label> 
        <br>
        <input type="radio" name="status" value="indeciso" id="indeciso"> <label for="indeciso">Estoy indeciso</label> 
        <br>
        <input type="radio" name="status" value="no_interesado" id="no_interesado"> <label for="no_interesado">No me interesa</label> 
    </p>
    <button id="mostrar">Mostrar opción activa</button>
    <button id="setear">Setear activo al valor "interesado"</button>

    <script>
        document.getElementById('mostrar').addEventListener('click', function() {
            // let valorActivo = document.querySelector('input[name="status"]:checked').value; // Esto tiene el problema de que puede que un elemento no esté activo, entonces no se podría acceder al value de un null, lo que sería un error en tiempo de ejecución
            let elementoActivo = document.querySelector('input[name="status"]:checked');
            if(elementoActivo) {
                alert(elementoActivo.value);
            } else {
                alert('No hay ninún elemento activo');
            }
        });

        document.getElementById('setear').addEventListener('click', function() {
            setRadio('status', 'interesado')
        });

        function setRadio(name, value) {
            document.querySelectorAll(`input[name="${name}"]`).forEach(element => {
                if(element.value === value) {
                    element.checked = true;
                }
            });
        }
    </script>
</body>
</html>

Acceso a los botones de radio con el método tradicional basado en el objeto form

A continuación en este artículo te vamos a explicar un método más tradicional de acceso a los botones de radio, que era necesario antes de tener en Javascript los métodos querySelector() y querySelectorAll(). Funcionará todavía sin problema alguno, solamente tienes que tener en cuenta:

• Deberían estar los elementos de radio en un formulario.
• El formulario debe tener un nombre para poder referirnos a él.

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 del formulario (enseguida veremos cómo), 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.

Ejemplo de utilización de radio button con el método tradicional de Javascript basado en el objeto form

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" 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.

Algoritmo para saber qué botón de radio está seleccionado

Nuestro ejemplo de control de radiobuttons con Javascript es bastante sencillo. Todo comienza en un botón, que al hacer clic sobre él, desata la funcionalidad del cambio del color de la página.

<input type="Button" name="" value="Cambia Color" onclick="cambiaColor()">

Como puedes ver en el "onclick" del botón, invocamos a la función cambiaColor() que hace todo el trabajo.

Quizás la parte más compleja de entender, aunque sige siendo muy simple cuando ya tienes una ligera idea de programación y entiendes los elementos radio button, es el algoritmo que hemos utilizado para saber el índice del botón de radio que está seleccionado.

Dicho algoritmo sería esta parte del código:

var i 
for (i = 0; i < document.fcolores.colorin.length; i++){ 
  if (document.fcolores.colorin[i].checked) {
 	break; 
 }
} 

Explicamos paso a paso este sencillo código Javascript para averiguar qué botón de radio está pulsado:

1. Se declara una variable llamada "i" en la primera línea, que vamos a usar dentro del bucle.
2. Hacemos un bucle for que va desde i=0 hasta el número de elementos que hay en los radio button que queremos controlar. Este bucle permite ir recorriendo el array de botones de radio hasta que encontramos el que tiene su propiedad checked a true.
3. En cada iteración del bucle se guarda en la variable "i" el índice del radio button actual.
4. Dentro del bucle, se comprueba si el elemento de radio con ese índice tiene su propiedad checked a true. En ese momento salimos del bucle, con lo que la variable "i" almacenará el índice del botón de radio seleccionado.

Ya fuera del bucle, en la última línea de la función cambiaColor(), cambiamos el color de fondo. Se trata de este código:

document.bgColor = document.fcolores.colorin[i].value

Simplemente estamos cambiando la propiedad "bgColor" del objeto document al valor que hay en el atributo "value" del radio button seleccionado.