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 :
Il en ressort que l’expression input[type=radio] est plus rapide que input:radio (mais est-elle autant générique ?)
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é