Επιλογέας radio
Ο επιλογέας :radio επιλέγει τα κουμπιά
radio. Δείτε την ετικέτα
radio.
Το ισοδύναμο του $(':radio') είναι
$('[type=radio]').
Εφόσον το :radio δεν ανήκει στις προδιαγραφές CSS,
για καλύτερη απόδοση στους σύγχρονους
πλοηγούς, είναι προτιμότερο να χρησιμοποιηθεί το [type='radio'] αντ' αυτού.
Σύνταξη
Εδώ επιλέγουμε τα κουμπιά radio:
$(':radio');
Όπως και με άλλους ψευδο-επιλογείς κλάσεων
(που ξεκινούν με ':'), πριν από το ':' είναι καλύτερο
να τοποθετηθεί το όνομα της ετικέτας ή ενός άλλου επιλογέα,
διαφορετικά θα εφαρμοστεί ο επιλογέας '*',
δηλαδή το $(':radio') θα ερμηνευτεί ως
$('*:radio'), γι' αυτό αντ' αυτού είναι προτιμότερο
να χρησιμοποιηθεί το $('input:radio').
Για την επιλογή συσχετισμένων κουμπιών radio μπορείτε
να χρησιμοποιήσετε το $('input[name=gender]:radio').
Παράδειγμα
Ας επιλέξουμε τα κουμπιά radio, να τα τυλίξουμε
σε ένα span. Στηρίτα ας κάνουμε στα spans πράσινο φόντο και
κόκκινο περίγραμμα με τη μέθοδο
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(); // εμποδίζει την αποστολή της φόρμας
});
<-javascript->
