« »
3/24/2009

Gérer les éléments input radio avec jQuery

J’ai eu hier une question sur la manipulation des éléments radio en Javascript. La personne voulait vérifier que pour chacun de ses groupes de radio, au moins un radio était sélectionné.

Plusieurs solutions en Javascript “pur” existent sur Internet mais aucune ne semblait simple à appliquer par cette personne. Je propose donc ici quelques snippets jQuery pour exploiter simplement les éléments Radio.

Nous partirons donc d’une page incluant la librairie jQuery et le code XHTML suivant :

<form action="?" method="get" id="monForm">
<input type="radio" name="opt1" value="1" checked="checked" />
<input type="radio" name="opt1" value="2" />
<input type="radio" name="opt1" value="3"/>

<input type="radio" name="opt2" value="1" />
<input type="radio" name="opt2" value="2" checked="checked" />
<input type="radio" name="opt2" value="3" />

<input type="radio" name="opt3" value="1" checked="checked" />
<input type="radio" name="opt3" value="2" />
<input type="radio" name="opt3" value="3"/>
</form>


Accéder aux inputs de type radio en jQuery

Il existe plusieurs façon d’accéder aux inputs de type radio en jQuery, j’ai réalisé quelques tests afin de définir quelles expressions étaient les plus rapides :

Benchmark jQuery
Il en ressort que l’expression input[type=radio] est plus rapide que input:radio (mais est-elle autant générique ?)

Le résultat sont très variable lorsque l’on précise un contexte (ici #monForm) et un grand nombre de radio. Je pense donc que les trois dernières expressions ne sont pas à prendre en compte dans l’analyse, du moins pour le moment. (Je travaille actuellement à améliorer mon outils de Benchmark afin que chacun puisse tester ses propres expressions jQuery).

Récupérer tous les inputs radios appartenant à un même groupe

$('input[type=radio][name=opt1]');//ici retourne 3 éléments input

Connaître si un groupe de radio à une valeur

$('input[type=radio][name=opt1]:checked').length; // Doit être égal à 1 si un radio à été sélectionné dans le groupe de opt1.

Vérifier que tous les radios ont été sélectionnés

$('input[type=radio]:checked').length; // Si au moins un radio est sélectionné pour chaque groupe, ce snippet retourne 3 (dans notre exemple)

Récupérer la valeur d’un groupe de radio

$('input[type=radio][name=opt1]:checked').attr('value'); //Retourne la valeur du radio sélectionné dans le groupe opt1. Retourne vide si aucun radio sélectionné

« »
 
 
Made with on a hot august night.
http://bit.ly/1II1u5L