jQuery sprawdzanie pola wyboru i wyzwalanie zdarzenia onclick javascript

Question

Próbuję sprawdzić pole wyboru przy użyciu jQuery i wywołać zdarzenie onclick w procesie.

Say mam pole zdefiniowane w HTML:

<input type="checkbox" value="checked" name="check1" onclick="alert(this.value);"> 

I mam oświadczenie jQuery, który jest uruchamiany w funkcję:

$('input[name=check1]').attr('checked', true); 

Wynik jest pole wyboru zostanie zaznaczone, ale javascript Zdarzenie onclick nie jest wyzwalane (stąd brak alertu). Ale gdybym miał wywołać kliknięcie nawet ręcznie jako takie:

$('input[name=check1]').attr('checked', true).trigger('click'); 

Rezultatem jest to pole wyboru zostanie zaznaczone, javascript onclick zdarzenie jest wyzwalany (a wartość jest prawidłowo zdobyć), ale wtedy pole wyboru zostanie odznaczone po tym.

Czy ktoś może mi powiedzieć, w jaki sposób mogę osiągnąć to, co próbuję zrobić?

Answer 1

Zastosowanie .triggerHandler() zamiast .trigger():

$('input[name=check1]').attr('checked', true).triggerHandler('click'); 

także skorzystać .prop() zamiast .attr(): (. Jeśli używasz jQuery 1.6 lub nowszej)

$('input[name=check1]').prop('checked', true).triggerHandler('click'); 

edit — także ponieważ skomentowałem inną odpowiedź, musisz uważać na dziwne zachowanie jQuery podczas programowego wyzwalania zdarzeń. Here is an illustrative jsfiddle. Gdy prawdziwe "kliknięcie" dzieje się na elemencie, obsługa "kliknięcia" dla elementu zobaczy zaktualizowaną wartość flagi "sprawdzone". Oznacza to, że po kliknięciu pola wyboru niezaznaczonego funkcja obsługi kliknięcia będzie miała ustawioną flagę "sprawdzone" na true. Jeśli jednak uruchomisz "kliknięcie" w niezaznaczonym polu wyboru za pośrednictwem jQuery, obsługa "kliknięcia" zobaczy flagę "zaznaczone" na false! To jest naprawdę złe, moim zdaniem, ale zawsze tak się dzieje.

edycja ponownie — oh, również zapomniałem kolejnym ważnym (i irytujące) jQuery niesamowitość: z powodów nieznany, .triggerHandler() API wywoła jedynie ładowarki na pierwszy dopasowanego elementu. Jeśli próbujesz wywołać wszystkie pola wyboru „kliknięcie” koparki, innymi słowy:

$('input:checkbox').triggerHandler('click'); 

wówczas tylko pierwsze pole wyboru na stronie zostanie uruchomiony. Co ogólnie zrobić w celu radzenia sobie z szaleństwem jest związać obsługi z własnym nazwiskiem fałszywe zdarzenia jak „kliknięcie”:

$('input:checkbox').bind('click my-click', function() ...) // or ".on()" with 1.7 

ten sposób mogę wywołać „my-click” i uzyskać najlepsze oba światy: biblioteka uruchamia obsługę dopasowanych elementów, ale nie przełącza rzeczywistego stanu elementów.

Answer 2

Zmiana:

$('input[name=check1]').attr('checked', true).trigger('click'); 

Do:

$('input[name=check1]').trigger('click').prop('checked', true); 

Answer 3

this answer wydaje się działać prawidłowo:

$('input[name=check1]').attr('checked', true).change();

jsFiddle demo

Answer 4

.on('changed', ...) jest zdecydowanie tym, do czego powinieneś być zobowiązany na elementach checkbox (zachowuje się o wiele bardziej rozsądnie. Wtedy możesz po prostu ręcznie wyzwolić .click() na elementach, które chcesz przełączyć stan, aby zobaczył właściwy wyzwalacz zdarzenia (i zobacz DOM w stanie dopasowania do tego, co te uchwyty również zobaczył).

<input type="checkbox" value="checked" name="check1"> 
<script> 
    $('input').on('change', function(e) {alert(e.target.value);}); 
    $('input').click(); 
    // see the alert, and if you checked $(e.target).is(':checked') you should get true 
</script>