Seletor checkbox
O seletor :checkbox seleciona
checkboxes. Veja a tag
checkbox.
O equivalente a $(':checkbox') é
$('[type=checkbox]').
Como :checkbox não é parte da especificação CSS,
para melhor desempenho em navegadores modernos
é melhor usar
[type='checkbox'] em seu lugar.
Sintaxe
É assim que selecionamos checkboxes:
$(':checkbox');
Assim como com outros pseudosseletores
(que começam com ':'), é melhor
colocar um nome de tag ou outro seletor antes do ':',
caso contrário, o seletor '*' será aplicado,
ou seja, $(':checkbox') será interpretado como
$('*:checkbox'), portanto, em vez disso, é melhor
usar $('input:checkbox').
Exemplo
Vamos selecionar todos os checkboxes, envolvê-los
em um span. Em seguida, vamos dar aos spans um fundo verde e
uma borda vermelha usando o método
css:
<form>
<input type="button" value="button">
<input type="file">
<input type="checkbox">
<button>button</button>
<input type="reset">
<input type="radio" name="test">
<input type="radio" name="test">
<input type="checkbox">
<input type="text">
</form>
$('form input:checkbox')
.wrap('<span></span>')
.parent()
.css({background: 'green', border: '2px red solid'});
$('form').submit(function(event) {
event.preventDefault(); // impede o envio do formulário
});
