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

Twitter Digg Delicious Stumbleupon Technorati Facebook Email

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

  1. Anallely 28. Sep, 2011 en 8:00 pm

    Graciiiiaaaaasss Abdel tu codigo esta buenisimo 😉

  2. Javier 03. Oct, 2011 en 2:24 am

    Muchísimas gracias Patxi, me fué muy útil para un captcha que estoy retocando.

  3. Jose 12. Oct, 2011 en 1:39 am

    gracias te la rifas una muy bna ayuda

  4. Ronald 12. Oct, 2011 en 1:51 am

    Muchas gracias, salvaste mi tarea y esperanza, tenia tiempo buscando la forma de obtener el valor de la opción elegida… me has quitado un dolor de cabeza de 4 días.

  5. Lenin 15. Oct, 2011 en 8:50 pm

    Muchas gracias amigo, me ayude mucho….

  6. Julian 03. Dic, 2011 en 8:20 pm

    He leido tu tutorial para obtener el valor correspondiente a un boton seleccionado. Lo he intentado aplicar a un programilla para calcular el agua corporal (está en basto), pero no logro obtener el resultado. ¿Qué es lo que hago mal?. Llevo tres dias (tambien duermo) intentándolo, pero no le encuentro la pega. Es la primera vez que uso botones- Envío el código:

    function getRadioButtonSelectedValue(ctrl)
    {
    for(i=0;i<ctrl.length;i++)
    if(ctrl[i].checked) return ctrl[i].value;
    }
    function ACT1 (form)
    form.ACT.value = parseFloat(getRadioButtonSelectedValue(document.Factor.sexedad.value)) * parseInt(form.P.value)
    }

    Varón menor de 65 años
    Varón de 65 años o mayor
    Mujer menor de 18 años
    Mujer de 18 a 65 años
    Mujer mayor de 65 años

    Introduce Peso en Kg:

  7. LeonardoCM87 26. Ene, 2012 en 6:17 pm

    Hola, a mi no me funciono este metodo lo probe en Opera 11.61, pero encontre un metodo en un libro que si me funciono aqui se los dejo por si alguien lo necesita:

    Chango
    Mono
    Pera

    ::: JavaScript :::

    function Regform(){
    var elementos = document.getElementsByName(«category»);
    var register;
    for(var i=0; i<elementos.length; i++) {
    if(elementos[i].checked){register = elementos[i].value; break;}
    }
    alert(register);
    }

  8. Fran 14. Jun, 2012 en 8:07 am

    Amigo necesito un pequeño empujon para ver si me puedes ayudar por favor

  9. albert norman 20. Jul, 2012 en 2:35 pm

    Eres el mejor tio!!!
    Todo lo que dijiste es correcto, lo intenté de esa manera y nada, pero con tu codigo fue el EXITO!!! GRACIAS POR TU APORTE!!!!

  10. marco 18. Feb, 2013 en 9:49 pm

    Una pregunta lo estoy aplicando pero donde coloco getRadioButtonSelectedValue(document.frmSO.so);

    ya colo que los radio button, despues function dentro del script , peor sigo sin poder obtener el valor tal vez no lo e comprendido del todo como funciona eso como soy nuevo y es para una tarea porfa que urge

  11. jair 10. Abr, 2013 en 9:58 pm

    getRadioButtonSelectedValue(document.frmSO.so);

    lo colocas en la parte de la pagina donde quieras llamar la funcion si por lo menos la quieres llamar por un enlace seria asi
    obten el valor chekeado

  12. Emb 05. Jun, 2013 en 2:12 pm

    Muy bueno, me sirvió y solucionó un problema.
    Gracias.

  13. Veronica 21. Jun, 2013 en 5:06 pm

    Hola, alguien sabe, cómo puedo hacer que al limpiar mis variables, se limpie el RadioButton?

  14. dnlfp 08. Ago, 2013 en 10:22 pm

    Genial, lo use y funciono a la primera, Gracias!!!

« Comentarios anteriores