Ver el valor de un “Radio Button” en un formulario html en javascript

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:

<form name="formu">
<input type="radio" name="valora" value="mala" />Mala<br />
<input type="radio" name="valora" value="regular" />Regular<br />
<input type="radio" name="valora" value="buena" />Buena <br />
<input 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);

7 pensamientos en “Ver el valor de un “Radio Button” en un formulario html en javascript

  1. Pingback: Bitacoras.com

  2. Edward

    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

  3. Marco

    Gracias, excelente tutorial. como sseria para pasarle a una caja de texto el valor que imprime en el mensaje

  4. RUB

    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:

Deja un comentario