Como obtener el valor de un radio button con Javascript
Hola.
En este post voy a mostrar cómo obtener el valor de un radio con Javascript y cómo hacer validación para saber si un radio ha sido seleccionado o no. Esto es muy útil cuando se quiere hacer validaciones Javascript en un form antes de hacer submit.
Generalmente se usa cuando son pocas las opciones a elegir. Digamos dos o tres opciones. Otros controles se pueden usar cuando se trata de múltiples opciones como por ejemplo los check box o los select con opción múltiple.
El uso más común que le he dado es la opción de género (Masculino y Femenino), dirección (Primaria y Secundaria), etc.
Lo primero que deben tomar en cuenta es que para lograr este comportamiento del radio button, los radio button deben tener el mismo name. Ejemplo:
<input type="radio" name="nombreradio" value="valor1" />
<input type="radio" name="nombreradio" value="valor2" />
<input type="radio" name="nombreradio" value="valor3" />
Colocando los radios con el mismo nombre permite que uno solo de ellos permanezca seleccionado. Si el usuario hace click en otro de ellos, este será el seleccionado y el anterior se limpiará.
Ahora, para obtener el valor seleccionado, basta acceder la propiedad value del radio button. Como todos tienen el mismo nombre se puede usar el name y devolverá un único valor.
Aquí abajo les dejo el ejemplo HTML con Javascript para que lo prueben con cualquier navegador.
<!DOCTYPE HTML>
<html lang = "en-us">
<head>
<title></title>
<meta charset = "utf-8" />
<script type="text/javascript">
function verradiovalue(){
var radiovalue=document.nombreform.nombreradio.value;
if(radiovalue.length==0) radiovalue="ninguno";
alert("Valor seleccionado: " + radiovalue);
}
</script>
</head>
<body>
<form name="nombreform" id="idform" action="http://www.google.com">
<input type="radio" name="nombreradio" value="valor1" />
<input type="radio" name="nombreradio" value="valor2" />
<input type="radio" name="nombreradio" value="valor3" />
<input type="button" value="Ver radio value" onclick="verradiovalue();" />
</form>
</body>
</html>
Puse una función Javascript en un botón para ver el valor del radio seleccionado. Si no hay selección se imprime "ninguno".
Con esto pueden personalizar su código a placer.
Espero les sirva.
Muchas gracias por tu aporte, era justo lo que necesitaba, una observación, el "if(radiovalue.length==0) radiovalue="ninguno", no es necesario
ResponderBorrargracias
Hola Camilo. Que bueno que te sirvió. No olvides compartirlo :)
BorrarGracias!
ResponderBorrar