Obtener el valor de un RadioButton seleccionado con JavaScript
Patxi Echarte,
05. Sep, 2005,
64 Comentarios
JavaScript
Esta es una de esas cosas que las haces de ciento a viento y que cada vez que toca hacerla de nuevo, o no hay forma de acordarse cómo hacerlo o de dónde lo habíamos utilizado, para hacer un «copypaste».
El siguiente HTML monta un formulario de ejemplo con el cual se solicita al usuario que elija su sistema operativo favorito.
<form name="frmSO"> <input type="radio" name="so" value="windows">Windows <input type="radio" name="so" value="linux">Linux <input type="radio" name="so" value="osx">OSX <input type="radio" name="so" value="other">Other </form> |
No hay una forma directa de obtener qué radio button está seleccionado y saber así su valor. Si es la primera vez que lo intentas seguramente habrás intentado hacer algo como document.form.so.value y te habrás dado cuenta que eso no funciona, y es normal ya que si te fijas en el html, tenemos 4 controles con el mismo nombre. Para poder obtener el valor seleccionado, cada «conjunto» de controles radio está representado en JavaScript mediante un array, de forma que debemos recorrer ese array para obtener la opción seleccionada. El siguiente código nos facilita el trabajo:
function getRadioButtonSelectedValue(ctrl) { for(i=0;i<ctrl.length;i++) if(ctrl[i].checked) return ctrl[i].value; } |
Ahora ya podríamos utilizar esta función para obtener el valor seleccionado, pasándole como parámetro el control radiobutton del que queremos obtener el valor, en nuestro caso: getRadioButtonSelectedValue(document.frmSO.so);.
¿no deberías usar el atributo id en vez el name?
Pues depende… Si estás haciendo una página que valide como XHMTL estricto, tendrías que sustituir el atributo name del form por id y añadir el id al resto de elementos del formulario, manteniendo también el atributo name. Luego en la llamada a la función, habría que utilizar document.getElementById(‘so’). Este es el DTD del XHTML estricto http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
Sin embargo si no necesitas validar la página como estricta, por ser una página ya existente, por compatibilidad o por lo que sea, es posible mantener el atributo name en el form, siendo el código JavaScript correcto en ese caso
Muchas gracias, esto ya me estaba deseperando
me tuvo un buen rato el problemilla ese
te agradesco mucho haber publicado esto
Muchas gracias.
Hola, tengo una página en la que genero un radio button por cada registro que me envie la base de datos, el problema se presenta cuando al extraer registros de la base de datos me devuelve menos de 2 registros entonces solo genero 0 o 1 registro pero el script no funciona pues la propiedad .length me muestra como no definida, como puedo saber cuantos radio button he puesto utilizando javascript???
Saludos
Carlos Rojas
por favor enviame la respuesta a :
ca_rl@QUITAESTOhotmail.comQUITAESTO
Graciaaaaaaaas!!!!!
Puta, ya me tenía chato esa we… =)
Espero no tener el problema de Carlos, bueno, si me sale aquí estaremos nuevamente.
Saludos!!!
hola, tengo un problemilla, a ver si puede ayudarme, pliz, necesito validar un radio que al pasar los datos por el formulario me obligue haber activado al menos un radio. muchas gracias.
Hola, podrías utilizar la función descrita, comprobando antes de hacer el submit del formulario que el valor del control que quieres comprobar sea distinto de null, o que corresponda con uno de los valores permitidos.
muchas gracias es una informacion muy buena.
Hola, buenas, quisiera saber como se puede hacer que en un formulario, al darle a enviar, sino supera la validación, me vuelva a recargar el formulario con los valores introducidos por parte del usuario, sobre todo en los Radio Button y en los Textarea.
gracias me resolvio un problema jeje!
gracias
Gracias me ha sido de mucha utilidad. Ya me estaba comiendo el coco con el tema.
Muchas grax
Gracias viejo, estaba bastante complicado ya este temilla jojo
hola yo tengo el mismo poblema pero yo los datos los estoy mostrndo en un alert
function escribe()
{
alert(«Nombre: «+fdp.nombre.value + «\nClave: «+fdp.clave.value +»\nSexo: «+fdp.sexo.value+»\nSigno zodiacal: «+fdp.signo.value+»\nHobie: «+fdp.hobie.value )
}
como puedo usar esa guncon dentro de la mia paar ke me muestre el calor del radio button
Muchas gracias
Buenas, pues a ver, si el radio solo tiene un registro yo lo he solucinado de esta forma.
function getRadioButtonSelectedValue(ctrl){
if(ctrl.length == undefined){
return ctrl.value;
}else{
for(i=0;i
Gracias por aportar la solución
Gracias, por el codigo, me sirvio de mucho.
Salu2………..
Sigan adelante con este tipo de ayuda, me fue muy util
Bueno la verdad yo tengo un incognita.
despues de obtener el valor del Radio Button…como hago para que se encienda el radio que tiene el valor.
esto es un poco tonto pero no lo he podido hacer…
Gracias…
Hola Gabriel, si tienes en ctrl el control que representa el radiobutton, tienes que poner su propiedad checked a true
ctrl.checked = true;
Hola Patxi, muchas gracias por la info…
Bendito Internet, Muchas gracias me fue de mucha utilidad. Gracias
Muchas gracias, como dices, despues tantas veces hacerlo, no recuerdas en donde lo utilizaste.
Despues de estar un rato atorado encontré tu solución.
hola muchas graias me sirvio de mucho buen dia
je je je .. que bestialidad hice: «document.form.so.value», y hata esto: «document.form.so.checked»…
Y tu script me ha parecido muy bueno, gracias !!!!
LMGT
funciona a la perefeccion gracias
hola yonecesito hacer lo mismo que en el ejemplo, se trata que tengo 2 radiobuttons tengo cuando son de sexo uno masculino otro femenino pero kiero que cuando de enviar me aparesca el valor seleccionado con VBSCRIP.. porfa me urge..
NOMBRE
DIRECCION
SEXO
MASCULINO
FEMENINO
DEPORTES
FUTBOL
TENIS
GOLF
COMENTARIOS
a=form1.nom.value
b=form1.dir.value
document.write(«TU NOMBRE ES: «)
document.write(a)
document.write(«»)
document.write(«TU DIRECCION ES: «)
document.write(b)
document.write(«»)
aqui deve estar el codigo para recoger el valor del sexo.. y se envie juntos con los campos nombre..
Gracias brohter de verdad que me has aliviado tremenda carga con este tema de javascript Muchas gracias
Hola, tengo un formulario que ya ha sido llenado anteriormente y quiero que me devuelva ese mismo formulario lleno de la base de datos, consigo hacerlo pero menos los radios y los checkbox, quisiera saber como obtener el valor de un radio y un checkbox de la base de datos. Le agradecería muchísimo.
Hola, quisiera saber como obtener el valor de un radio y un checkbox de un formlario que ya ha sido llenado anteriormente, quiero obtener estos valores de la base de datos, mi formulario es php y la base de datos esta en mysql. Gracias
De verdad muchas gracias … estupendo
GRacias, muy útil.
Muchas gracias por la solucion, estoy trabajando con tags de struts para el radio button y basado en lo que comentas tambien me funcione perfecto. Espero a alguien mas le sirva dejo parte del código:
Codigo JavaScript:
function validarSeleccion(evento)
{
var forma = document.forms[«criterioBusquedaCancelacion»].elements[«poliza.ID_POLIZA»];
var valorSeleccionado = getRadioButtonSelectedValue(forma);
alert(«Valor: » + valorSeleccionado);
}
mil gracias ese codigo es sencillo pero funciona muy bien y me ayudo mucho muevamente gracias.
Excelente, sencillo pero excelente, esperemos a ver si HTML 5 ya incorpora esta opcion por defecto.
Muchas gracias, me ayudo bastante de nuevo gracias.
Pero yo usé ese código y me funciona perfecto en Internet Explorer pero en Mozilla firefox no funciona. Qué puedo hacer para que me funcione en Mozilla firefox ??
hola, creo que esto fue publicado en 2005, pero no importa,quiero agradecer, me fue de mucha utilidad. Saludos.
hola!! a todo alguien me puede ayudar un pokito…
tengo una pag donde kiero editar los registros y estos estan con radio asi
RUT (Ej: 13.234.344-1 )
OTRO
<input type="text" name="x_cliente_rut" id="x_cliente_rut" size="30" maxlength="10" value="»>
<input type="text" name="x_cliente_extranjero" id="x_cliente_extranjero" size="30" maxlength="15" value="»>
pero al momento de modificar no lo hace guaaa no se q será
Muchas Gracias
graciaaaaaaaaaaaaaaaaaaaaas
ya tenia un raton buscandolo, me salvaste la vida
bueno no tanto
Gracias man… asu esta desesperado x que no me salia
,gracias x tu ayuda
hola tengo un problemita no se como cargar el valor del radio buton que selcciono en otra pagina
HOLA MUCHAS GRACIAS POR ESTA INFORMACIÓN ESTABA TRABAJANDO CON UN JSP PERO NO ME FUNCIONABA
SÓLO LE AGREGUE UN TRUE XD POR ALGÚN CASO QUE TAMBÍEN NO LE SALGA A ALGUIEN
SALUDOS
function getRadioButtonSelectedValue(ctrl)
{
for(i=0;i<ctrl.length;i++)
{
//return ctrl[i].value;
if(ctrl[i].checked==true)
{
document.write(ctrl[i].value.toString());
}
}
}
!!!!!!! MUCHISIMAS GRACIAS!!!!!
Me salvaste de salir tarde un viernes del trabajo.
function validarRadioButton(){
var opciones = document.getElementsByName(«Nombre_Del_Radio»);
var seleccionado = false;
for(var i = 0; i < opciones.length; i++){
if(opciones[i].checked){
seleccionado = true;
break;
}
}
if(!seleccionado){
document.getElementById("ID del div donde se muestra mensaje").innerHTML = "Debe seleccionar una opcion.";
}
}