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>
No hay comentarios:
Publicar un comentario