94

関数を次のようなチェックボックス要素にバインドすると、次のようになります。

$("#myCheckbox").click( function() {
    alert($(this).is(":checked"));
});

チェックボックスは、イベントがトリガーされる前にチェックされた属性を変更します。これは通常の動作であり、逆の結果になります。

しかし、私がそうするとき：

$("#myCheckbox").click();

チェックボックスは、イベントがトリガーされた後にチェックされた属性を変更します。

私の質問は、通常のクリックのようにjQueryからクリックイベントをトリガーする方法はありますか（最初のシナリオ）？

PS：私はすでにtrigger('click');で試しました。

4

13 に答える 13

105 
$('#myCheckbox').change(function () {
    if ($(this).prop("checked")) {
        // checked
        return;
    }
    // not checked
});

注: jquery の古いバージョンでは、使用しても問題ありませんでしたattr。現在prop、状態を読み取るために使用することをお勧めします。

于 2010-04-17T22:56:43.067 に答える
27

jQuery 1.3.2および1.4.2で機能する回避策があります。

$("#myCheckbox").change( function() {
    alert($(this).is(":checked"));
});

//Trigger by:
$("#myCheckbox").trigger('click').trigger('change');​​​​​​​​​​​​​

しかし、私は同意します、この動作はネイティブ イベントに比べてバグがあるようです。

于 2010-04-17T23:06:50.193 に答える
10

2016 年 6 月の時点で (jquery 2.1.4 を使用)、他の提案されたソリューションはどれも機能しません。チェックattr('checked')は常に戻りundefined、is('checked)常に戻りますfalse。

prop メソッドを使用するだけです。

$("#checkbox").change(function(e) {

  if ($(this).prop('checked')){
    console.log('checked');
  }
});
于 2016-06-13T09:05:43.293 に答える
4

jQuery 1.7.2 でまだこの動作が発生しています。簡単な回避策は、クリック ハンドラーの実行を setTimeout で延期し、その間にブラウザーに魔法をかけてもらうことです。

$("#myCheckbox").click( function() {
    var that = this;
    setTimeout(function(){
        alert($(that).is(":checked"));
    });
});
于 2012-09-05T10:31:31.313 に答える
2 
<input id="widget-wpb_widget-3-custom_date" class="mycheck" type="checkbox" value="d/M/y" name="widget-wpb_widget[3][custom_date]" unchecked="true">    

var atrib = $('.mycheck').attr("unchecked",true);
$('.mycheck').click(function(){
if ($(this).is(":checked")) 
{
$('.mycheck').attr("unchecked",false);
   alert("checkbox checked");
}
else
{
$('.mycheck').attr("unchecked",true);
 alert("checkbox unchecked");
}
});
于 2015-08-21T12:50:14.813 に答える
2

このかなり望ましくない動作が予想される場合は、jQuery.trigger() から追加のパラメーターをチェックボックスのクリック ハンドラーに渡すことを回避する方法があります。この追加のパラメーターは、ユーザーがチェックボックス自体を直接クリックするのではなく、プログラムによってクリックがトリガーされたことをクリック ハンドラーに通知するためのものです。チェックボックスのクリック ハンドラーは、報告されたチェック ステータスを反転できます。

ID「myCheckBox」のチェックボックスでクリックイベントをトリガーする方法は次のとおりです。true に設定された単一のメンバー nonUI を持つオブジェクト パラメーターも渡していることに注意してください。

$("#myCheckbox").trigger('click', {nonUI : true})

そして、チェックボックスのクリックイベントハンドラーでそれを処理する方法を次に示します。ハンドラー関数は、2 番目のパラメーターとして非 UI オブジェクトの存在を確認します。(最初のパラメータは常にイベント自体です。) パラメータが存在し、true に設定されている場合、報告された .checked ステータスを反転します。そのようなパラメーターが渡されない場合 (ユーザーが単に UI のチェックボックスをクリックした場合は存在しません)、実際の .checked ステータスを報告します。

$("#myCheckbox").click(function(e, parameters) {
   var nonUI = false;
        try {
            nonUI = parameters.nonUI;
        } catch (e) {}
        var checked = nonUI ? !this.checked : this.checked;
        alert('Checked = ' + checked);
    });

http://jsfiddle.net/BrownieBoy/h5mDZ/の JSFiddle バージョン

Chrome、Firefox、IE 8 でテストしました。

于 2012-06-21T05:41:00.733 に答える
0

最初のシナリオに合わせて、これは私が思いついたものです。

http://jsbin.com/uwupa/edit

基本的に、「クリック」イベントをバインドする代わりに、「変更」イベントをアラートにバインドします。

次に、イベントをトリガーするときは、最初にクリックをトリガーし、次に変更をトリガーします。

于 2010-04-17T23:04:29.193 に答える
0

Nick Craver の回答に加えて、これを適切に機能さIE 8せるには、チェックボックスに追加のクリック ハンドラーを追加する必要があります。

// needed for IE 8 compatibility
if ($.browser.msie)
    $("#myCheckbox").click(function() { $(this).trigger('change'); });

$("#myCheckbox").change( function() {
    alert($(this).is(":checked"));
});

//Trigger by:
$("#myCheckbox").trigger('click').trigger('change');

それ以外の場合、コールバックはチェックボックスがフォーカスを失ったときにのみトリガーさIE 8れます。これは、クリックされたときにチェックボックスとラジオにフォーカスが維持されるためです。

ただし、テストしていませんIE 9。

于 2012-06-04T16:30:26.610 に答える
-2 
if ($.browser.msie) {
    $("#myCheckbox").click(function() { $(this).trigger('change'); });
}

$("#myCheckbox").change(function() {
        alert($(this).is(":checked"));
    });
于 2014-01-27T08:15:34.543 に答える