Ver el valor de un «Radio Button» en un formulario html en javascript

23 marzo 2012

•

Para conocer el valor de un radio button por javascript debemos utilizar document.NOMBRE_FORMULARIO.NOMBRE_CAMPO[posición].value

Veamos un ejemplo para aclarar un poco como funciona. Dentro de una página html tenemos un formulario con varios radio buttons para valorar la calidad de un página:
[HTML]
<from name=»formu»>
type=»radio» name=»valora» value=»mala» />Mala

type=»radio» name=»valora» value=»regular» />Regular

type=»radio» name=»valora» value=»buena» />Buena

type=»radio» name=»valora» value=»muy buena» />Muy buena
</form>
[/HTML]

Para saber si uno de los elementos que conforman el grupo de radio buttons de nombre «valora» está selecionado utilizaríamos:

[JAVASCRIPT]
if(document.formu.valora[0].checked){
alert(«El primer valor está seleccionado»); //en nuestro caso «Mala»
}
[/JAVASCRIPT]

Como habréis visto, el primer elemento es 0 y no 1. Ahora lo que podemos hacer es recorrernos todas las opciones hasta dar con la que esté marcada de esta manera:

[JAVASCRIPT]
for(i=0;i<document.formu.valora.length;i++){
if(document.formu.valora[i].checked) {
marcado=i;
}
}
alert(«El valor seleccionado es: «+document.formu.valora[marcado].value);
[/JAVASCRIPT]

*** ACTUALIZACIÓN ***

Gracias a Raúl, que me ha avisado que si sólo hay un radio button el script no devuelve el valor seleccionado, he ampliado el script anterior para que contemple esa posibilidad:

[JAVASCRIPT]

marcado=-1
if(document.formu.valora.length){
for(i=0;i<document.formu.valora.length;i++){
if(document.formu.valora[i].checked) {
marcado=i;
}
}
if(marcado!=-1) alert(«El valor seleccionado es: «+document.formu.valora[marcado].value);
}else{
if(document.formu.valora.checked){
alert(«El valor seleccionado es: «+document.formu.valora.value);
}
}

[/JAVASCRIPT]

javascript Programación

10 respuestas a «Ver el valor de un «Radio Button» en un formulario html en javascript»

Bitacoras.com

23 marzo 2012

Información Bitacoras.com…

Valora en Bitacoras.com: Para conocer el valor de un radio button por javascript debemos utilizar document.NOMBRE_FORMULARIO.NOMBRE_CAMPO[posición].value Veamos un ejemplo para aclarar un poco como funciona. Dentro de una página html tenemos un for……
elkin

5 noviembre 2012

buenos días y muchas gracias por el aporte me sirvió de mucho
Edward

2 diciembre 2012

Gracias por tu explicación pero que si lo único que deseo es saber si han seleccionado o no un radiobotton, de modo que cuando si no se hace de el error debes seleccionar un valor.
Eje:

¿Preguta 1?

Si

No

¿Pregunta2?

Satisfecho

Conforme

Incoforme

Otro:

Seleccione

Dinero

Oportunidades

Otro:

Salud

Situación social

Respuesta

*Nombre:

*Apellidos:

*E-mail:

*Teléfono:

*Ciudad:

*Estado o Depto.:

function validacion(Encuesta){

//valido el texto, númroe y mail
var bienTexto = /^[a-zA-Z]|á|é|í|ó|ú|Á|É|Í|Ó|Ú|ä|ë|ï|ö|ü|Ä|Ë|Ï|Ö|Ü|à|è|ì|ò|ù|À|È|Ì|Ò|Ù|n|N]+$/;
var bienEmail = /^(.+\@.+\..+)$/;
var bienNum = /^([0-9s+-])+$/;

//Validar Pregunta1
if (document.getElementsByName(‘p1’).checked==false){
alert(«Por favor escoja una opción en la pregunta 2.»)
return false;// sale de la funcion y NO envia el formulario
}

//Validar Pregunta2
else if (document.getElementsByName(‘p2’).checked==false){
alert(«Por favor escoja una opción en la pregunta 2.»)
return false;// sale de la funcion y NO envia el formulario
}

//Validar Pregunta5
else if (document.getElementsByName(‘p5’).checked==false){
alert(«Por favor escoja una opción en la pregunta 5.»)
return false;// sale de la funcion y NO envia el formulario
}

//Validar Pregutna9
else if (bienTexto.test(Encuesta.p9.value)==false){
alert(«Escriba brevemente su meta, sueño u objetivo.(Escribale aunque le considere absurdo.)»)
return false;// sale de la funcio?n y NO envi?a el formulario
}

//Validar Pregunta10
else if (document.getElementsByName(‘p10’).checked==false){
alert(«Por favor escoja una opción en la pregunta 10.»)
return false;// sale de la funcion y NO envia el formulario
}

//validar Nombre
else if (bienTexto.test(Encuesta.Nombre.value)==false){
alert(«ingrese su Nombre»)
return false;// sale de la funcio?n y NO envi?a el formulario
}

//validar Apellido
else if (bienTexto.test(Encuesta.Apellido.value)==false){
alert(«ingrese su Apellido»)
return false;// sale de la funcio?n y NO envi?a el formulario
}

//validar Email
else if (bienEmail.test(Encuesta.Email.value)==false){
alert(«ingrese un Email válido»)
return false;// sale de la funcio?n y NO envi?a el formulario
}

//validar Telefono
else if (bienNum.test(Encuesta.Telefono.value)==false){
alert(«Ingrese su número de teléfono fijo o movil de contacto, sin espacios.»)
return false;// sale de la funcio?n y NO envi?a el formulario
}

//validar Ciudad
else if (bienTexto.test(Encuesta.Ciudad.value)==false){
alert(«Ingrese la ciudad donde vive actualmente.»)
return false;// sale de la funcio?n y NO envi?a el formulario
}

//validar Estado
else if (bienTexto.test(Encuesta.Estado.value)==false){
alert(«Ingrese el Estado, Departamento o Provincia correspondiente con la ciudad donde vive actualmente.»)
return false;// sale de la funcio?n y NO envi?a el formulario
}

//validar País
else if (!document.getElementById(‘Pais’).selectedIndex){
alert(«Seleccionar su País de recidencia.»)
return false;// sale de la funcio?n y NO envi?a el formulario
}

//el formulario se envia
document.formulario.target = «_blank»;
document.formulario.action = «res.php»;
document.formulario.submit();
}

Aqui solo me funciona una parte, lo es validar campos de texto pero los radio, no funcionan bien pues solo toman el primer radio.
gracias por tu pronta respuesta
Marco

10 abril 2013

Gracias, excelente tutorial. como sseria para pasarle a una caja de texto
Marco

10 abril 2013

Gracias, excelente tutorial. como sseria para pasarle a una caja de texto el valor que imprime en el mensaje
RUB

5 mayo 2013

hola tengo un problema necesito sumar el valor de 3 radio button y mandar el resultado en una textbox pero eee intentado hacer y no puedo me podrias ayudar???
mi codigo es el siguiente

Documento sin título

//salon = document.getElementsByName(«id_salon»);
//banquete= document.getElementsByName(«id_banquete»);
//musica = document.getElementsByName(«id_musica»);

//me indica que radio se selecciono y obtiene el valor
function getRadioButtonSelectedValue(btn)
{
for(i=0;i<btn.length;i++)
if(btn[i].checked) return btn[i].value;
}
//obtener los costos

function CostoTotal()
{
var costosa= getRadioButtonSelectedValue(document.frmsalon.id_salon);
var costoban= getRadioButtonSelectedValue(document.frmbanquete.id_banquete);
var costomus= getRadioButtonSelectedValue(document.frmmusica.id_musica);

return costosa+costoban+costomus;
}

Elige Salon:

<?php
include ("conexion.php");
if (!($cursor = mysql_query(" SELECT s.nombre_salon,s.costo,CONCAT(s.localidad,' ',s.calle,' ',s.numero,' ',s.colonia)as Direccion,p.nombre_empresa FROM tbl_salon as s, tbl_proveedor as p")))
die( mysql_error() . "ERROR: SELECT no válido");

$numero=1;
echo "»;
echo»<table border='1'";
echo"<table border='1'";
echo"»;
echo»Nombre \n»;
echo»Costo \n»;
echo»Direccion \n»;
echo»Empresa \n»;
echo»Selecciona \n»;

echo «»;
while ($fila = mysql_fetch_row($cursor))
{
echo»»;
$numero++;
echo»»;
echo «$fila[0] \n»;
echo «$fila[1] \n»;
echo «$fila[2] \n»;
echo «$fila[3] \n»;
echo «<INPUT TYPE='radio' NAME='id_salon' VALUE='$fila[2]' onClick='alert('OK')' \n»;
}
echo «»;
echo «»;
?>

Elige Banquete:

<?php
include ("conexion.php");
if (!($cursor = mysql_query(" SELECT b.nombre_banquete,b.tipo_banquete,b.costo,b.descripcion,p.nombre_empresa FROM tbl_banquete as b, tbl_proveedor as p")))
die( mysql_error() . "ERROR: SELECT no válido");

$numero=1;
echo "»;
echo»<table border='1'";
echo"<table border='1'";
echo"»;
echo»Nombre \n»;
echo»Tipo \n»;
echo»Costo \n»;
echo»Descripcion \n»;
echo»Empresa \n»;
echo»Selecciona \n»;
echo «»;
while ($fila = mysql_fetch_row($cursor))
{
echo»»;
$numero++;
echo»»;
echo «$fila[0] \n»;
echo «$fila[1] \n»;
echo «$fila[2] \n»;
echo «$fila[3] \n»;
echo «$fila[4] \n»;
echo «<INPUT TYPE='radio' NAME='id_banquete' VALUE='$fila[2]' onClick='CostoTotal()' \n»;
}
echo «»;
echo «»;
?>

Elige Musica:

<?php
include ("conexion.php");
if (!($cursor = mysql_query(" SELECT m.nombre_sonido,m.tipo_musica,m.costo,m.descripcion,p.nombre_empresa FROM tbl_musica as m, tbl_proveedor as p")))
die( mysql_error() . "ERROR: SELECT no válido");

$numero=1;
echo "»;
echo»<table border='1'";
echo"<table border='1'";
echo"»;
echo»Nombre \n»;
echo»Tipo \n»;
echo»Costo \n»;
echo»Descripcion \n»;
echo»Empresa \n»;
echo»Selecciona \n»;
echo «»;
while ($fila = mysql_fetch_row($cursor))
{
echo»»;
$numero++;
echo»»;
echo «$fila[0] \n»;
echo «$fila[1] \n»;
echo «$fila[2] \n»;
echo «$fila[3] \n»;
echo «$fila[4] \n»;
echo «<INPUT TYPE='radio' NAME='id_musica' VALUE='$fila[2]' onClick='CostoTotal()' \n»;
}
echo «»;
echo «»;
?>

document.getElementsByName(«total»).value=CostoTotal();
Total:
Delton

4 julio 2013

Obrigado pela explicação foi muito útil.
ariel pizarro

13 abril 2015

hola mi consulta es la siguiente:
lo del if va dentro de la pagina html o dentro del jsp no se si me explico bien ?
Sara Flores

14 mayo 2019

Muchas gracias, me orientó mucho su idea y pude adaptarla muy bien a mi pagina.
Elias

29 mayo 2019

excelente aporte, me sirvio de mucho gracias.

Deja una respuesta

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.