Saltar la navegación

2.3.- Objeto input de tipo radio.

Ilustración de una radio.
Clker-Free-Vector-Images (Pixabay License)

El ajustar un grupo de objetos de tipo radio desde JavaScript requiere un poco más de trabajo. Para dejar que el navegador gestione un grupo de objetos de tipo radio, deberemos asignar el mismo atributo name a cada uno de los botones del grupo. Podemos tener múltiples grupos de botones de tipo radio en un formulario, pero cada miembro de cada grupo tendrá que tener el mismo atributo name que el resto de compañeros del grupo.

Cuando le asignamos el mismo name a varios elementos en un formulario, el navegador lo que hace es crear un array con la lista de esos objetos que tienen el mismo name. El contenido del atributo name será el nombre del array. Algunas propiedades, se las podremos aplicar al grupo como un todo; otras en cambio, tendremos que aplicárselas a cada elemento del grupo y lo haremos a través del índice del array del grupo. Por ejemplo, podemos ver cuantos botones hay en un grupo radio, consultando la propiedad length de ese grupo:

objetoFormulario.nombregrupo.length;

Y si queremos acceder a la propiedad checked de un botón en particular, lo haremos accediendo a la posición del array y a la propiedad checked:

objetoFormulario.nombregrupo[0].checked;     // Accedemos a la propiedad checked del primer botón del grupo

Ejemplo:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>DWEC05 - Trabajando con objetos input de tipo radio</title>
        <script type="text/javascript">
            const mostrarDatos = () => {
                for  (let i=0;i<document.formulario.actores.length; i++) {
                    if  (document.formulario.actores[i].checked)
                        alert(document.formulario.actores[i].value);
                }
            }
        </script>
    </head>
    <body>
        <h1>Trabajando con objetos input de tipo radio</h1>
        <form  name="formulario" action="stooges.php">
            <fieldset>
                <legend>Selecciona tu actor favorito:</legend>
                <label for="actor1">Willis</label>
                <input type="radio" name="actores" id="actor1"value="Walter Bruce Willis - 19 de Marzo de 1955" checked>
                <label for="actor2">Carrey</label>
                <input type="radio" name="actores" id="actor-2" value="James Eugene Jim Carrey - 17 de Enero de 1962">
                <label for="actor3">Tosar</label>
                <input type="radio" name="actores" id="actor-3" value="Luis Tosar - 13 de Octubre de 1971">
                <input type="button" id="consultar" name="consultar" value="Consultar Más Datos" onclick="mostrarDatos()">
            </fieldset>
        </form>
    </body>
</html>