Seletor radio
O seletor :radio seleciona botões de
rádio. Consulte a tag
radio.
O equivalente a $(':radio') é
$('[type=radio]').
Como :radio não faz parte da especificação CSS,
para melhor desempenho em navegadores modernos
é melhor usar [type='radio'] em seu lugar.
Sintaxe
É assim que selecionamos os botões de rádio:
$(':radio');
Assim como com outros pseudo-seletores de classe
(que começam com ':'), é melhor colocar o nome
da tag ou outro seletor antes do ':',
caso contrário, o seletor '*' será aplicado,
ou seja, $(':radio') será interpretado como
$('*:radio'), portanto, em vez disso, é melhor
usar $('input:radio').
Para selecionar botões de rádio relacionados, você pode
usar $('input[name=gender]:radio').
Exemplo
Vamos selecionar os botões de rádio, envolvê-los
em um span. Em seguida, vamos definir um fundo verde e
uma borda vermelha para os spans usando o método
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(); // impede o envio do formulário
});
<-javascript->
