web-dev-qa-db-ja.com

jQuery、チェックボックス、および.is（ "：checked"）

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

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

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

しかし、私がするとき：

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

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

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

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

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

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

86
tcurdt

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

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

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

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

26
Nick Craver

2016年6月現在（jquery 2.1.4を使用）、他の推奨ソリューションはいずれも機能しません。 attr('checked')をチェックすると常にundefinedが返され、is('checked)をチェックすると常にfalseが返されます。

Propメソッドを使用するだけです：

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

  if ($(this).prop('checked')){
    console.log('checked');
  }
});
10
atomless

私はまだjQuery 1.7.2でこの動作を経験しています。簡単な回避策は、setTimeoutを使用してクリックハンドラーの実行を延期し、その間にブラウザーに魔法をかけることです。

$("#myCheckbox").click( function() {
    var that = this;
    setTimeout(function(){
        alert($(that).is(":checked"));
    });
});
4
Srđan Stanić
  $("#checkbox").change(function(e) {

  if ($(this).prop('checked')){
    console.log('checked');
  }
});
2
Superman
<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");
}
});
2
Tejas Soni

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

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

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

そして、チェックボックスのクリックイベントハンドラーでこれを処理する方法を次に示します。ハンドラー関数は、2番目のパラメーターとしてnonUIオブジェクトの存在を確認します。 （最初のパラメーターは常にイベント自体です。）パラメーターが存在し、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でテストしました。

2
ChillyPenguin
$("#personal").click(function() {
      if ($(this).is(":checked")) {
            alert('Personal');
        /* var validator = $("#register_france").validate(); 
        validator.resetForm(); */
      }
            }
            );

JSFIDDLE

0
Surya R Praveen

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

http://jsbin.com/uwupa/edit

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

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

0
RussellUresti

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でテストしていません。

0
Yuri Ghensev
$( "#checkbox" ).change(function() {
    if($(this).is(":checked")){
        alert('hi');
    }

});
0
user3607804