Radio selector
De selector :radio selecteert keuzerondjes.
Zie de tag
radio.
Het equivalent van $(':radio') is
$('[type=radio]').
Aangezien :radio geen deel uitmaakt van de CSS-specificatie,
is het voor betere prestaties in moderne
browsers beter om [type='radio'] te gebruiken.
Syntaxis
Zo selecteren we keuzerondjes:
$(':radio');
Net als bij andere pseudo-klasse selectors
(die beginnen met ':'), is het beter
om voor de ':' een tagnaam of een andere selector te plaatsen.
Anders wordt de selector '*' toegepast,
dus $(':radio') wordt geïnterpreteerd als
$('*:radio'). Daarom is het beter
om $('input:radio') te gebruiken.
Om gerelateerde keuzerondjes te selecteren kan
$('input[name=gender]:radio') gebruikt worden.
Voorbeeld
Laten we de keuzerondjes selecteren, ze wrappen
in een span. Vervolgens geven we de spans een groene achtergrond en
een rode rand met behulp van de methode
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(); // voorkomt het verzenden van het formulier
});
<-javascript->
