Recorrer Opciones Type Radio con Javascript
Algunas veces me encontre con el problema de recorrer opciones de input Radio. En este post vamos a ver como con una simple función podemos recorrer las opciones y rescatar cual fue seleccionada. No es la gran cosa, pero siempre es útil tenerla agendada para ahorrarnos tiempo y esfuerzo.
El HTML del ejemplo quedaría de esta forma:
<form id="form" name="form"> <table> <tr> <td>Argentina</td><td><input type="radio" name="opciones" value="Argentina" /></td> </tr> <tr> <td>Brasil</td><td><input type="radio" name="opciones" value="Brasil" /></td> </tr> <tr> <td>Paraguay</td><td><input type="radio" name="opciones" value="Paraguay" /></td> </tr> <tr> <td>Chile</td><td><input type="radio" name="opciones" value="Chile" /></td> </tr> <tr> <td>Colombia</td><td><input type="radio" name="opciones" value="Colombia" /></td> </tr> <tr> <td>Peru</td><td><input type="radio" name="opciones" value="Peru" /></td> </tr> </table> <input type="button" onclick="verResultado();" value="Ver Opcion" /> </form>
Ahora veremos que hace la función verResultado():
function verResultado(){
var opcion=SeleccionOpcion(document.form.opciones);
alert(opcion);
}
Es fácil de entender, en la primer línea, como vemos llamamos a la función SeleccionOpcion enviando como parametro la colección de Radio Buttons para luego rescatar la opción seleccionada.
Lo siguiente es entender que hacemos en esta ultima función:
function SeleccionOpcion(x){
var i;
for (i=0;i<x.length;i++){
if (x[i].checked)
break;
}
return x[i].value;
}
Recorremos mediante un For todas las opciones disponibles y rescatamos la opción chekeda y la devolvemos con un return.
De esta manera podriamos utilizar la misma función con varias colecciones de opciones.Acá la DEMO
Espero les sea de utilidad, nos vemos en un próximo post.
También te puede Interesar
¿Disfrutaste esta entrada? Por qué no dejas un comentario abajo y continúas la conversación, o te suscribes a mi feed y obtienes artículos como este enviados a tu lector de feeds.
Hola intente aplicar la funcion pero en el mio de acuerdo a la consulta el genera una cantidad de opciones.. cuando muestra mas de una funciona perfecto pero cuando solo da una no permite hacerlo. que puede pasar alli??