La casella di controllo jQuery ha controllato lo stato dell’evento modificato

Voglio che un evento faccia fuoco sul lato client quando una casella di controllo è selezionata / deselezionata:

$('.checkbox').click(function() { if ($(this).is(':checked')) { // Do stuff } }); 

Fondamentalmente voglio che accada per ogni checkbox sulla pagina. Questo metodo di triggerszione del clic e il controllo dello stato sono ok?

Sto pensando che ci deve essere un modo jQuery più pulito. Qualcuno conosce una soluzione?

Associare all’evento di change anziché click . Tuttavia, probabilmente avrai ancora bisogno di controllare se la casella è selezionata o meno:

 $(".checkbox").change(function() { if(this.checked) { //Do stuff } }); 

Il vantaggio principale di legarsi all’evento di change rispetto all’evento click è che non tutti i clic su una casella di controllo causeranno il cambiamento dello stato. Se si desidera solo catturare eventi che fanno sì che la casella di controllo cambi stato, si desidera l’evento di change nome appropriato. Redatto nei commenti

Nota anche che ho usato this.checked invece di avvolgere l’elemento in un object jQuery e usando i metodi jQuery, semplicemente perché è più breve e più veloce accedere direttamente alla proprietà dell’elemento DOM.

Modifica (vedi commenti)

Per ottenere tutte le caselle di controllo hai un paio di opzioni. Puoi usare lo pseudo-selettore: :checkbox :

 $(":checkbox") 

O potresti usare un attributo come un selettore:

 $("input[type='checkbox']") 

Per riferimento futuro a chiunque abbia difficoltà, se si aggiungono le caselle dynamicmente, la risposta corretta sopra non funzionerà. Dovrai sfruttare la delega degli eventi che consente a un nodo genitore di acquisire eventi ribollenti da un discendente specifico ed emettere un callback.

 // $().on('', '', callback); $(document).on('change', '.checkbox', function() { if(this.checked) { // checkbox is checked } }); 

Nota che è quasi sempre inutile usare il document per il selettore genitore. Scegli invece un nodo genitore più specifico per impedire la propagazione dell’evento su troppi livelli.

L’esempio seguente mostra come gli eventi dei dom node aggiunti dynamicmente non triggersno listener definiti in precedenza.

 $postList = $('#post-list'); $postList.find('h1').on('click', onH1Clicked); function onH1Clicked() { alert($(this).text()); } // simulate added content var title = 2; function generateRandomArticle(title) { $postList.append('

Title ' + title + '

'); } setTimeout(generateRandomArticle.bind(null, ++title), 1000); setTimeout(generateRandomArticle.bind(null, ++title), 5000); setTimeout(generateRandomArticle.bind(null, ++title), 10000);
  

Title 1

Title 2

Solo un’altra soluzione

 $('.checkbox_class').on('change', function(){ // on change of state if(this.checked) // if changed state is "CHECKED" { // do the magic here } }) 

Se la tua intenzione è quella di albind un evento solo alle caselle di controllo spuntate (quindi sparerebbe quando sono deselezionate e ricontrollate più tardi) allora questo è quello che vuoi.

 $(function() { $("input[type='checkbox']:checked").change(function() { }) }) 

se la tua intenzione è albind un evento a tutte le caselle di controllo (selezionate e deselezionate)

 $(function() { $("input[type='checkbox']").change(function() { }) }) 

se vuoi che si attivi solo quando vengono controllati (da non selezionato), rispondi a @James Allardice.

Inserimento BTW input[type='checkbox']:checked è il selettore CSS.

 $(document).ready(function () { $(document).on('change', 'input[Id="chkproperty"]', function (e) { alert($(this).val()); }); }); 

forse questa potrebbe essere un’alternativa per te.

 ` 

Assunzione di azioni in base a un evento (all’evento click).

 $('#my_checkbox').on('click',function(){ $('#my_div').hide(); if(this.checked){ $('#my_div').show(); } }); 

Senza eventi che agiscono in base allo stato corrente.

 $('#my_div').hide(); if($('#my_checkbox').is(':checked')){ $('#my_div').show(); } 

Prova questa convalida di jQuery

 $(document).ready(function() { $('#myform').validate({ // initialize the plugin rules: { agree: { required: true } }, submitHandler: function(form) { alert('valid form submitted'); return false; } }); });