JQuery проверка флажка и запуск javascript onclick event

Я пытаюсь проверить флажок с помощью jQuery и запустить событие onclick в этом процессе.

Скажем, у меня есть флажок, определенный в html:

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

И у меня есть инструкция jQuery, которая запускается в функции:

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

В результате проверяется флажок, но событие javascript onclick не запускается (следовательно, нет предупреждения). Но если бы я должен был запустить клик даже вручную:

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

В результате проверяется флажок, запускается событие javascript onclick (и значение правильно получено), но после этого флажок не проверяется после этого.

Может ли кто-нибудь сказать мне, как я могу добиться того, что я пытаюсь сделать?

Ответ 1

Используйте .triggerHandler() вместо .trigger():

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

Кроме того, используйте .prop() вместо .attr():

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

(если вы используете jQuery 1.6 или новее.) edit — Кроме того, поскольку я прокомментировал другой ответ, вы должны следить за странным поведением jQuery при программном запуске событий. Вот иллюстративный jsfiddle. Когда реальный "click" происходит в элементе, обработчик "click" для элемента увидит обновленное значение флага "checked" , То есть, если вы нажмете на флажок без отметки, обработчик клика увидит флаг "checked", установленный на true. Однако, если вы запускаете "click" на флажке без проверки через jQuery, обработчик "click" увидит флаг "checked", установленный на false! Это действительно плохо, на мой взгляд, но это всегда делалось так.

изменить снова — О, кроме того, я забыл еще одну важную (и раздражающую) jQuery странность: по неизвестным причинам API .triggerHandler() будет вызывать обработчики только для первого совпадающего элемента. Если вы попытаетесь вызвать все флажки "click", другими словами:

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

тогда будет запущен только первый флажок на странице. То, что я обычно делаю, чтобы справиться с безумием, связывает обработчик с моим собственным именем фальшивого события, а также "click":

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

Таким образом, я могу вызвать "мой клик" и получить лучшее из обоих миров: библиотека запускает обработчик всех согласованных элементов, но не переключает фактическое состояние элементов.

Ответ 2

Изменить:

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

To:

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

Ответ 3

этот ответ работает нормально:

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

jsFiddle demo

Ответ 4

.on('changed', ...) определенно то, что вы должны привязать к элементам флажка (он ведет себя гораздо разумнее). Тогда вы можете просто запустить триггер .click() на элементах, которые хотите переключить состояние, чтобы увидеть соответствующий триггер события (см. DOM в состоянии соответствия тому, что видели эти обработчики).

<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>