jueves, 23 de febrero de 2012

Seleccionar y validar un radiobutton con jQuery

Vamos a ver como de sencillo es obtener el valor de un radiobutton para así poder validarlo (podremos saber si hay algún radiobutton marcado) y como marcarlos empleando jQuery.

En el ejemplo que veremos vamos a tener un grupo de radiobuttons con name=”estacion”.
<input type="radio" name="estacion" value="primavera">Primavera</input>
<input type="radio" name="estacion" value="verano">Verano</input>
<input type="radio" name="estacion" value="otono">Otoño</input>
<input type="radio" name="estacion" value="invierno">Invierno</input>

Para mostar o recoger el valor de la opción marcada lo hariamos
var valor = $('input:radio[name=estacion]:checked').val();

Una vez recogigo el valor del radiobutton podremos realizar las comprobaciones que necesitemos

Para marcar un radiobutton con jQuery lo haremos mediante el nombre de los input radio, estacion en el ejemplo, y el índice de los elementos que componen el grupo de radiobuttons, teniendo en cuenta que empezarán en cero. De esta forma, primavera será 0, verano=1, otono=2,invierno=3 y Unknown=4.

Por lo tanto, para selecionar la opción primavera, lo haremos:
$('input:radio[name=estacion]:nth(0)').attr('checked',true);
/*o tambien*/
$('input:radio[name=estacion]')[0].checked = true;

Para seleccionar la opción verano:
$('input:radio[name=estacion]:nth(1)').attr('checked',true);
/*o tambien*/
$('input:radio[name=estacion]')[1].checked = true;

Para resetear el radiobutton seleccionado:
$('input:radio[name=estacion]').attr('checked',false);

2 comentarios :

  1. Buena reseña, me ayudastes con publicacion en resolver dicho problema. Muchisimas gracias.

    ResponderEliminar