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:
<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>
Para saber si uno de los elementos que conforman el grupo de radio buttons de nombre «valora» está selecionado utilizaríamos:
if(document.formu.valora[0].checked){
alert("El primer valor está seleccionado"); //en nuestro caso "Mala"
}
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:
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);
*** 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:
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);
}
}
Pingback: Bitacoras.com
buenos días y muchas gracias por el aporte me sirvió de mucho
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
Gracias, excelente tutorial. como sseria para pasarle a una caja de texto
Gracias, excelente tutorial. como sseria para pasarle a una caja de texto el valor que imprime en el mensaje
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:
Obrigado pela explicação foi muito útil.
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 ?
Muchas gracias, me orientó mucho su idea y pude adaptarla muy bien a mi pagina.
excelente aporte, me sirvio de mucho gracias.