Selektor radio
Selektor :radio wybiera przyciski
opcji. Zobacz tag
radio.
Odpowiednikiem $(':radio') jest
$('[type=radio]').
Ponieważ :radio nie należy do specyfikacji CSS,
to dla poprawy wydajności w nowoczesnych
przeglądarkach lepiej zastosować [type='radio'].
Składnia
Tak wybieramy przyciski opcji:
$(':radio');
Podobnie jak w przypadku innych pseudoklas selektorów
(zaczynających się od ':'), przed ':' lepiej
umieścić nazwę tagu lub innego selektora, w
przeciwnym razie zostanie zastosowany selektor '*',
czyli $(':radio') będzie postrzegany jako
$('*:radio'), więc zamiast tego lepiej
użyć $('input:radio').
Dla wyboru powiązanych przycisków opcji można
użyć $('input[name=gender]:radio').
Przykład
Wybierzmy przyciski opcji, otoczmy je
spanem. Następnie ustawmy spanom zielone tło i
czerwoną ramkę za pomocą metody
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(); // zapobiega wysłaniu formularza
});
<-javascript->
