Selector checkbox

El selector :checkbox selecciona casillas de verificación. Ver la etiqueta checkbox. El equivalente de $(':checkbox') es $('[type=checkbox]'). Debido a que :checkbox no es parte de la especificación CSS, para mejorar el rendimiento en navegadores modernos es mejor usar [type='checkbox'] en su lugar.

Sintaxis

Así seleccionamos las casillas de verificación:

javascript$(':checkbox');

Al igual que con otros selectores de pseudo-clases (que comienzan con ':'), es mejor colocar el nombre de la etiqueta u otro selector antes de ':', de lo contrario se aplicará el selector '*', es decir, $(':checkbox') se interpretará como $('*:checkbox'), por lo que es mejor usar $('input:checkbox') en su lugar.

Ejemplo

Seleccionemos todas las casillas de verificación, las envolvemos en un span. Luego hagamos que los spans tengan fondo verde y borde rojo usando el método css:

html<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>

javascript$('form input:checkbox')
  .wrap('<span></span>')
  .parent()
  .css({background: 'green', border: '2px red solid'});

$('form').submit(function(event) {
  event.preventDefault(); // previene el envío del formulario
});

Véase también