sábado, 30 de agosto de 2014

Tutorial Javascript parte 23 - Inputs radio y checkbox




En esta parte del tutorial veremos como manejar los inputs radio y checkbox con javascript, por ejemplo, obteniendo el valor del input radio seleccionado o comprobando si el checkbox ha sido seleccionado o no.

Código de ejemplo del capítulo ...

<!DOCTYPE HTML>
<html>
<head>

<script>
window.onload = function()
     {
   var btn_radio = document.getElementById("btn-radio");
   btn_radio.onclick = function()
     {
   var input_radio = document.formulario.input_radio;
   for (x = 0; x < input_radio.length; x++)
     {
      if (input_radio[x].checked)
     {
      alert(input_radio[x].value);
     }
     }
  }
  
  var btn_checkbox = document.getElementById("btn-checkbox");
  btn_checkbox.onclick = function()
    {
     if (document.formulario.input_checkbox.checked)
        {
      alert("Ok, has aceptado los términos");
     }
     else
     {
     alert("Mal, debes de aceptar los términos");
     }
    }
  }
</script>

</head>
<body>
<form method="post" name="formulario">
<!-- Ejemplo input radio -->
Uno: <input type="radio" name="input_radio" checked value="1"><br>
Dos: <input type="radio" name="input_radio" value="2"><br>
Tres: <input type="radio" name="input_radio" value="3"><br>
Cuatro: <input type="radio" name="input_radio" value="4"><br>
Cinco: <input type="radio" name="input_radio" value="5"><br>
<button type="button" id="btn-radio">Obtener el valor del input radio seleccionado</button>

<br><br>

<!-- Ejemplo input checkbox -->
Aceptar los términos: <input type="checkbox" name="input_checkbox"><br>
<button type="button" id="btn-checkbox">Saber si el checkbox está seleccionado</button>
</form>
</body>
</html>