Sélecteur radio
Le sélecteur :radio sélectionne les boutons
radio. Voir la balise
radio.
L'équivalent de $(':radio') est
$('[type=radio]').
Étant donné que :radio ne fait pas partie de la spécification CSS,
pour de meilleures performances dans les navigateurs modernes,
il est préférable d'utiliser [type='radio'] à la place.
Syntaxe
Voici comment nous sélectionnons les boutons radio :
$(':radio');
Comme avec les autres sélecteurs de pseudo-classes
(commençant par ':'), il est préférable
de placer un nom de balise ou un autre sélecteur avant ':',
sinon le sélecteur '*' sera appliqué,
c'est-à-dire que $(':radio') sera interprété comme
$('*:radio'), donc il est préférable d'utiliser
$('input:radio') à la place.
Pour sélectionner des boutons radio liés, on peut
utiliser $('input[name=gender]:radio').
Exemple
Sélectionnons les boutons radio, enveloppons-les
dans un span. Ensuite, appliquons un fond vert et
une bordure rouge aux spans en utilisant la méthode
css :
<form>
<input type="button" value="button">
<input type="file">
<button>button</button>
<input type="reset">
<input type="radio" name="test">
<input type="radio" name="test">
<input type="text">
</form>
<+javascript+>
$('form input:radio')
.wrap('')
.parent()
.css({background: 'green', border: '2px red solid'});
$('form').submit(function(event) {
event.preventDefault(); // empêche l'envoi du formulaire
});
<-javascript->
