Sélecteur checkbox

Le sélecteur :checkbox sélectionne les cases à cocher. Voir la balise checkbox. L'équivalent de $(':checkbox') est $('[type=checkbox]'). Étant donné que :checkbox ne fait pas partie de la spécification CSS, pour de meilleures performances dans les navigateurs modernes, il est préférable d'utiliser [type='checkbox'] à la place.

Syntaxe

Voici comment nous sélectionnons les cases à cocher :

javascript$(':checkbox');

Comme avec les autres sélecteurs de pseudo-classe (commençant par ':'), il est préférable de mettre le nom de la balise ou un autre sélecteur avant ':', sinon le sélecteur '*' sera appliqué, c'est-à-dire que $(':checkbox') sera interprété comme $('*:checkbox'), donc il est préférable d'utiliser $('input:checkbox') à la place.

Exemple

Sélectionnons toutes les cases à cocher, entourons-les d'un span. Ensuite, donnons aux spans un fond vert et une bordure rouge avec la méthode 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(); // empêche l'envoi du formulaire
});

Voir aussi