Tutorial de JavaScript : Conceptos

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:

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>

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

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

</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:

   if (document.getElementById('radio1').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.

Control RADIO

Retornar