Archivo de la etiqueta: radio button

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:

<from name="formu">
type="radio" name="valora" value="mala" />Mala

type="radio" name="valora" value="regular" />Regular

type="radio" name="valora" value="buena" />Buena

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

*** ACTUALIZACIÓN ***

Gracias a Raúl, que me ha avisado que si sólo hay un radio button el script no devuelve el valor seleccionado, he ampliado el script anterior para que contemple esa posibilidad:


marcado=-1
if(document.formu.valora.length){
for(i=0;i<document.formu.valora.length;i++){
if(document.formu.valora[i].checked) {
marcado=i;
}
}
if(marcado!=-1)    alert("El valor seleccionado es: "+document.formu.valora[marcado].value);
}else{
if(document.formu.valora.checked){
alert("El valor seleccionado es: "+document.formu.valora.value);
}
}