Obtener el valor de un RadioButton seleccionado con JavaScript
September 5th, 2005Esta 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);.
delicious
menéame
fresqui
September 5th, 2005 a las 8:38 pm
¿no deberías usar el atributo id en vez el name?
September 6th, 2005 a las 9:28 am
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
September 21st, 2005 a las 10:06 pm
Muchas gracias, esto ya me estaba deseperando
September 27th, 2005 a las 5:47 am
me tuvo un buen rato el problemilla ese
te agradesco mucho haber publicado esto
October 29th, 2005 a las 7:08 am
Muchas gracias.
December 8th, 2005 a las 6:43 am
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
January 6th, 2006 a las 12:57 am
Graciaaaaaaaas!!!!!
Puta, ya me tenía chato esa we… =)
Espero no tener el problema de Carlos, bueno, si me sale aquí estaremos nuevamente.
Saludos!!!
January 23rd, 2006 a las 9:28 pm
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.
January 23rd, 2006 a las 9:45 pm
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.
March 23rd, 2006 a las 10:49 pm
muchas gracias es una informacion muy buena.
April 21st, 2006 a las 1:13 pm
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.
June 17th, 2006 a las 7:50 pm
gracias me resolvio un problema jeje!
August 21st, 2006 a las 8:23 pm
gracias
August 29th, 2006 a las 11:18 am
Gracias me ha sido de mucha utilidad. Ya me estaba comiendo el coco con el tema.
December 7th, 2006 a las 7:41 pm
Muchas grax
December 29th, 2006 a las 5:35 pm
Gracias viejo, estaba bastante complicado ya este temilla jojo
May 22nd, 2007 a las 7:57 am
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
May 30th, 2007 a las 2:54 am
Muchas gracias
June 20th, 2007 a las 12:39 pm
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
August 9th, 2007 a las 11:18 am
Gracias por aportar la solución
August 11th, 2007 a las 2:14 am
Gracias, por el codigo, me sirvio de mucho.
Salu2………..
September 7th, 2007 a las 4:09 pm
Sigan adelante con este tipo de ayuda, me fue muy util
September 27th, 2007 a las 7:05 pm
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…
September 28th, 2007 a las 10:22 am
Hola Gabriel, si tienes en ctrl el control que representa el radiobutton, tienes que poner su propiedad checked a true
ctrl.checked = true;
September 28th, 2007 a las 3:43 pm
Hola Patxi, muchas gracias por la info…
March 4th, 2008 a las 9:48 pm
Bendito Internet, Muchas gracias me fue de mucha utilidad. Gracias
March 25th, 2008 a las 8:25 pm
Muchas gracias, como dices, despues tantas veces hacerlo, no recuerdas en donde lo utilizaste.
Despues de estar un rato atorado encontré tu solución.
April 16th, 2008 a las 2:21 am
hola muchas graias me sirvio de mucho buen dia
April 25th, 2008 a las 12:30 am
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