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

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イベントがトリガーされます(そして値は正しく取得されます)、その後チェックボックスはチェックされなくなります。

どなたか、私がやろうとしていることを実現する方法を教えていただけませんか?

ソリューション

.trigger()の代わりに.triggerHandler()` を使用します。

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

また、.attr()の代わりに .prop() を使ってください。

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

(if you're using jQuery 1.6 or newer.) edit — また、別の回答でコメントしたように、プログラムでイベントをトリガーする場合、jQuery'の奇妙な動作に注意する必要があります。(http://jsfiddle.net/Pointy/nrYec/) 実際に要素上で "click" が起こると、その要素の "click" ハンドラには "checked" フラグの更新値が表示されます。つまり、チェックされていないチェックボックスをクリックすると、クリックハンドラには "checked" フラグが true に設定されていることが表示されます。 しかし、チェックされていないチェックボックスを jQuery で "click" した場合、 "click" ハンドラには "checked" フラグが false にセットされているのが見えます。 これは本当に悪いことだと私は思いますが、いつもそうなのです。

edit again — そうそう、もう一つ重要な(そしてイライラさせられる)jQueryの奇妙な点を忘れていました:理由は不明ですが、 .triggerHandler() APIは最初にマッチした要素上のハンドラのみを起動します。チェックボックスの "click" ハンドラをすべてトリガーしようとすると、言い換えれば、次のようになります。

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

とすると、ページ上の最初のチェックボックスだけがトリガーされます。私が一般的に行っているのは、ハンドラを "click" と同様に私自身の偽のイベント名でバインドすることでこの非常識に対処しています。

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

この方法では、"my-click" をトリガーして、両方の長所を得ることができます:ライブラリは、マッチした要素の all でハンドラをトリガーしますが、要素の実際の状態をトグルすることはありません。

解説 (1)

変更する。

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

へ。

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

この回答は問題なく動作するようです。

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

[jsFiddleデモ][1]です。

解説 (0)