Selettore checkbox

Il selettore :checkbox seleziona le checkbox. Vedi il tag checkbox. L'equivalente di $(':checkbox') è $('[type=checkbox]'). Poiché :checkbox non fa parte delle specifiche CSS, per migliorare le prestazioni nei browser moderni è meglio usare [type='checkbox'] al suo posto.

Sintassi

In questo modo selezioniamo le checkbox:

javascript$(':checkbox');

Come con altri selettori di pseudo-classe (che iniziano con ':'), è meglio mettere il nome del tag o un altro selettore prima di ':', altrimenti verrà applicato il selettore '*', cioè $(':checkbox') verrà interpretato come $('*:checkbox'), quindi invece di questo è meglio usare $('input:checkbox').

Esempio

Selezioniamo tutte le checkbox, le avvolgiamo in uno span. Poi rendiamo gli span con sfondo verde e bordo rosso usando il metodo 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(); // impedisce l'invio del modulo
});

Vedi anche