Obtener el valor de un RadioButton seleccionado con 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);.

Twitter Digg Delicious Stumbleupon Technorati Facebook Email

64 Respuestas para “Obtener el valor de un RadioButton seleccionado con JavaScript”

  1. ¿no deberías usar el atributo id en vez el name?

  2. 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

  3. Muchas gracias, esto ya me estaba deseperando

  4. me tuvo un buen rato el problemilla ese
    te agradesco mucho haber publicado esto

  5. Muchas gracias.

  6. 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

  7. Graciaaaaaaaas!!!!!
    Puta, ya me tenía chato esa we… =)
    Espero no tener el problema de Carlos, bueno, si me sale aquí estaremos nuevamente.
    Saludos!!!

  8. 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.

  9. 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.

  10. muchas gracias es una informacion muy buena.

  11. 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.

  12. gracias me resolvio un problema jeje!

  13. gracias

  14. Gracias me ha sido de mucha utilidad. Ya me estaba comiendo el coco con el tema.

  15. Muchas grax

  16. Gracias viejo, estaba bastante complicado ya este temilla jojo

  17. 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

  18. Muchas gracias

  19. 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

  20. Gracias por aportar la solución

  21. Gracias, por el codigo, me sirvio de mucho.
    Salu2………..

  22. Sigan adelante con este tipo de ayuda, me fue muy util

  23. 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…

  24. Hola Gabriel, si tienes en ctrl el control que representa el radiobutton, tienes que poner su propiedad checked a true

    ctrl.checked = true;

  25. Hola Patxi, muchas gracias por la info…

  26. Bendito Internet, Muchas gracias me fue de mucha utilidad. Gracias

  27. Muchas gracias, como dices, despues tantas veces hacerlo, no recuerdas en donde lo utilizaste.
    Despues de estar un rato atorado encontré tu solución.

  28. hola muchas graias me sirvio de mucho buen dia

  29. 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

  30. funciona a la perefeccion gracias

  31. 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..

  32. Gracias brohter de verdad que me has aliviado tremenda carga con este tema de javascript Muchas gracias

  33. 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.

  34. 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

  35. De verdad muchas gracias … estupendo

  36. GRacias, muy útil.

  37. ISC Luis Eduardo 19. Mar, 2009 en 8:31 pm

    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);
    }

  38. carlos illanes 03. Abr, 2009 en 6:28 am

    mil gracias ese codigo es sencillo pero funciona muy bien y me ayudo mucho muevamente gracias.

  39. Excelente, sencillo pero excelente, esperemos a ver si HTML 5 ya incorpora esta opcion por defecto.

  40. Muchas gracias, me ayudo bastante de nuevo gracias.

  41. 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 ??

  42. hola, creo que esto fue publicado en 2005, pero no importa,quiero agradecer, me fue de mucha utilidad. Saludos.

  43. 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á

  44. Muchas Gracias

  45. graciaaaaaaaaaaaaaaaaaaaaas
    ya tenia un raton buscandolo, me salvaste la vida
    bueno no tanto

  46. Gracias man… asu esta desesperado x que no me salia
    ,gracias x tu ayuda

  47. hola tengo un problemita no se como cargar el valor del radio buton que selcciono en otra pagina

  48. 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());

    }

    }
    }

  49. !!!!!!! MUCHISIMAS GRACIAS!!!!!

    Me salvaste de salir tarde un viernes del trabajo.

  50. 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.";
    }
    }