jQueryチェックボックスをチェックして、JavaScriptのonclickイベントをトリガーする

Question

jQueryを使用してチェックボックスをチェックし、そのプロセスでonclickイベントをトリガーしようとしています。

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

そして、私は関数内でトリガーされるjQueryの文を持っている：

は、私は、HTMLで定義されているチェックボックスを持っていると言う

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

結果はチェックボックスがオンになりますですがjavascriptのonclickイベントはトリガーされません（したがってアラートは発生しません）。私のような手動でもクリックをトリガーした場合でも：結果はチェックボックスがオンになりますです

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

は、Javascriptのonclickイベントがトリガされ（および値が正しく得ている）が、その後のチェックボックスは、その後はオフにされます。

誰かが私がやろうとしていることを達成する方法を教えてもらえますか？

Answer 1

代わり.trigger()の使用.triggerHandler()：また

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

、代わりに.attr()の.prop()を使用します。

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

（。あなたはjQueryの1.6以降を使用している場合）編集 —をまた、私が別の答えにコメントしたように、プログラムでイベントをトリガするときにjQueryの奇妙な振る舞いに注意する必要があります。 Here is an illustrative jsfiddle.要素の実際の「クリック」が発生すると、要素の「クリック」ハンドラには、「checked」フラグの更新された値が表示されます。つまり、チェックされていないチェックボックスをクリックすると、クリックハンドラはtrueに設定された "checked"フラグを表示します。ただし、jQueryを使用して未チェックのチェックボックスで「クリック」をトリガーすると、「クリック」ハンドラーはfalseに設定された「チェック済み」フラグを表示します。それは本当に悪いことですが、私の意見では、いつもそうしています。

編集再び —ああ、また、私は忘れてしまったもう一つの重要な（と刺激性）jQueryのおかしな：未知の理由のために、.triggerHandler() APIのみ最初に一致した要素にハンドラを呼び出します。あなたはすべてのチェックボックスを誘発する他の言葉で、ハンドラを「クリック」しようとした場合：

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

を、ページ上の唯一の最初のチェックボックスがトリガされます。私はトリガー「私のクリック」とのベストを引き出すことができる方法

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

：私は、一般的に狂気に対処するためにやっていることは、私自身の偽イベント名だけでなく、「クリック」して、ハンドラをバインドしています両方の世界：ライブラリはすべてののハンドラをトリガしますが、要素の実際の状態を切り替えることはありません。

Answer 2

変更：

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

へ：

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

Answer 3

this answerが正常に動作するようです：

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

jsFiddle demo

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