Control RADIO


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:
<html>
<head>
</head>
<body>

<script type="text/javascript"> 
  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>

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

Retornar