Selector checkbox

Selectorul :checkbox selectează casetele de bifat. Consultați eticheta checkbox. Echivalentul $(':checkbox') este $('[type=checkbox]'). Deoarece :checkbox nu face parte din specificația CSS, pentru o performanță mai bună în browserele moderne este mai bine să folosiți [type='checkbox'] în locul său.

Sintaxă

Așa selectăm casetele de bifat:

javascript$(':checkbox');

La fel ca și cu alte selectoare de pseudo-clase (ce încep cu ':'), înainte de ':' este mai bine să puneți numele etichetei sau al altui selector, în caz contrar va fi aplicat selectorul '*', adică $(':checkbox') va fi interpretat ca $('*:checkbox'), de aceea în loc de aceasta este mai bine să folosiți $('input:checkbox').

Exemplu

Să selectăm toate casetele de bifat, să le împachetăm într-un element span. Apoi să facem fundalul verde și o bordură roșie pentru elementele span folosind metoda 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(); // împiedică trimiterea formularului
});

Consultați și