Gestione degli eventi della casella di controllo jQuery

Ho il seguente:

<form id="myform">
   <input type="checkbox" name="check1" value="check1">
   <input type="checkbox" name="check2" value="check2">
</form>

Come posso usare jQuery per catturare qualsiasi evento di controllo che si verifica myforme dire quale casella di controllo è stata attivata (e sapere se è stata attivata o disattivata)?

$('#myform :checkbox').change(function() {
    // this will contain a reference to the checkbox   
    if (this.checked) {
        // the checkbox is now checked 
    } else {
        // the checkbox is now no longer checked
    }
});

Usa l'evento change.

$('#myform :checkbox').change(function() {
    // this represents the checkbox that was checked
    // do something with it
});

Esistono diverse risposte utili, ma nessuna sembra coprire tutte le ultime opzioni. A tal fine, tutti i miei esempi soddisfano anche la presenza di labelelementi corrispondenti e consentono anche di aggiungere dinamicamente caselle di controllo e vedere i risultati in un pannello laterale (reindirizzando console.log).

• L'ascolto di clickeventi noncheckboxes è una buona idea in quanto ciò non consentirà la commutazione della tastiera o le modifiche apportate quando è stato fatto clic su un elemento corrispondente . Ascolta sempre l' evento.labelchange

• Utilizzare lo :checkboxpseudo-selettore jQuery anziché input[type=checkbox]. :checkboxè più breve e più leggibile.

• Utilizzare is()con lo :checkedpseudo-selettore jQuery per verificare se una casella di controllo è selezionata. Questo è garantito per funzionare su tutti i browser.

Gestore di eventi di base associato ad elementi esistenti:

$('#myform :checkbox').change(function () {
    if ($(this).is(':checked')) {
        console.log($(this).val() + ' is now checked');
    } else {
        console.log($(this).val() + ' is now unchecked');
    }
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/2/

Appunti:

• Utilizza il :checkboxselettore, che è preferibile utilizzareinput[type=checkbox]
• Questo si collega solo agli elementi corrispondenti esistenti al momento della registrazione dell'evento.

Gestore di eventi delegato associato all'elemento antenato:

I gestori di eventi delegati sono progettati per situazioni in cui gli elementi potrebbero non esistere ancora (caricati o creati dinamicamente) ed è molto utile. Essi delegano la responsabilità di un elemento antenato (da qui il termine).

$('#myform').on('change', ':checkbox', function () {
    if ($(this).is(':checked')) {
        console.log($(this).val() + ' is now checked');
    } else {
        console.log($(this).val() + ' is now unchecked');
    }
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/4/

Appunti:

• Funziona ascoltando gli eventi (in questo caso change) per passare a un elemento antenato che non cambia (in questo caso #myform).
• E poi applica il selettore jQuery ( ':checkbox'in questo caso) per solo gli elementi della catena bolla .
• E poi si applica la funzione di gestore di eventi per solo gli elementi corrispondenti che hanno causato l'evento.
• Utilizzare documentcome predefinito per connettere il gestore eventi delegato, se nient'altro è più vicino / conveniente.
• Non utilizzare bodyper collegare eventi delegati in quanto ha un bug (da fare con lo stile) che può impedirgli di ottenere eventi del mouse.

Il risultato dei gestori delegati è che gli elementi corrispondenti devono esistere solo al momento dell'evento e non quando il gestore eventi è stato registrato. Ciò consente di aggiungere dinamicamente contenuti per generare gli eventi.

Q: è più lento?

A: Finché gli eventi sono a velocità di interazione dell'utente, non è necessario preoccuparsi della differenza trascurabile nella velocità tra un gestore eventi delegato e un gestore collegato direttamente. I vantaggi della delega superano di gran lunga qualsiasi aspetto negativo minore. I gestori di eventi delegati sono in realtà più veloci da registrare in quanto si collegano in genere a un singolo elemento corrispondente.

Perché non prop('checked', true)attiva l' changeevento?

Questo è in realtà di progettazione. Se ha generato l'evento, potresti facilmente entrare in una situazione di aggiornamenti infiniti. Invece, dopo aver modificato la proprietà selezionata, invia un evento change allo stesso elemento usando trigger(not triggerHandler):

ad es. senza triggereventi

$cb.prop('checked', !$cb.prop('checked'));

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/5/

ad es. con triggeril normale evento di cambiamento viene catturato

$cb.prop('checked', !$cb.prop('checked')).trigger('change');

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/6/

Appunti:

• Non utilizzare triggerHandlercome suggerito da un utente, in quanto non distribuirà gli eventi a un gestore eventi delegato .

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/8/

anche se sarà lavorare per un gestore di eventi collegato direttamente all'elemento:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/9/

Gli eventi attivati ​​con .triggerHandler () non eseguono la bolla nella gerarchia DOM; se non sono gestiti direttamente dall'elemento target, non fanno nulla.

Riferimento: http://api.jquery.com/triggerhandler/

Se qualcuno ha funzionalità aggiuntive che ritengono non siano coperte da questo, si prega di suggerire aggiunte .

Utilizzando il nuovo metodo "on" in jQuery (1.7): http://api.jquery.com/on/

    $('#myform').on('change', 'input[type=checkbox]', function(e) {
        console.log(this.name+' '+this.value+' '+this.checked);

    });

• il gestore dell'evento continuerà a vivere
• catturerà se la casella di controllo è stata modificata dalla tastiera, non solo facendo clic

$('#myform input:checkbox').click(
 function(e){
   alert($(this).is(':checked'))
 }
)

Riconoscendo il fatto che il richiedente ha richiesto specificamente jQuery e che la risposta selezionata è corretta, si dovrebbe notare che questo problema in realtà non ha bisogno di jQuery per dire. Se si desidera risolvere questo problema senza di esso, si può semplicemente impostare l' onClickattributo delle caselle di controllo a cui desidera aggiungere funzionalità aggiuntive, in questo modo:

HTML:

<form id="myform">
  <input type="checkbox" name="check1" value="check1" onClick="cbChanged(this);">
  <input type="checkbox" name="check2" value="check2" onClick="cbChanged(this);">
</form>

javascript:

function cbChanged(checkboxElem) {
  if (checkboxElem.checked) {
    // Do something special
  } else {
    // Do something else
  }
}

Fiddle: http://jsfiddle.net/Y9f66/1/

Ho provato il codice dalla prima risposta, non funziona ma ho giocato e questo lavoro per me

$('#vip').change(function(){
    if ($(this).is(':checked')) {
        alert('checked');
    } else {
        alert('uncheck');
    }
});