26

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

誰かが私がやろうとしていることをどのように達成できるか教えてもらえますか？

4

6 に答える 6

56

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

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

また、 ：.prop()の代わりに使用して.attr()ください

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

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

もう一度編集します—ああ、また、私は別の重要な（そして苛立たしい）jQueryの奇妙さを忘れました：理由は不明ですが、 APIは最初に一致した要素.triggerHandler()でのみハンドラーを呼び出します。すべてのチェックボックスの「クリック」ハンドラーをトリガーしようとすると、言い換えると、次のようになります。

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

次に、ページの最初のチェックボックスのみがトリガーされます。狂気に対処するために私が一般的に行うことは、ハンドラーを自分の偽のイベント名と「クリック」でバインドすることです。

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

そうすれば、「my-click」をトリガーして、両方の長所を活かすことができます。ライブラリは、一致したすべての要素でハンドラーをトリガーしますが、要素の実際の状態を切り替えることはありません。

于 2012-04-22T13:15:05.200 に答える
13

変化する：

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

に：

$('input[name=check1]').trigger('click').prop('checked', true);
于 2012-04-22T13:15:30.340 に答える
3

この答えはうまくいくようです：

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

jsFiddleデモ

于 2012-04-22T13:25:44.367 に答える
0

.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>
于 2014-07-07T20:17:37.043 に答える
0

チェックされたクリックで..もう一度チェックを外して..
これがこのロジックです

$('input[name=check1]').prop('checked',!$('input[name=check1]').prop('checked'));
于 2020-10-29T13:11:23.640 に答える
0

コメントできないので、他の投稿へのアドオンです。私は小道具のために辞書を使わなければならなかったことに気づきました。

IE

$('input[name=check1]').prop({'checked' : !$('input[name=check1]'}).prop('checked'));

于 2021-01-23T00:21:48.587 に答える