jQuery、チェックボックス、.is（“：checked”）

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

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

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

しかし、私がするとき：

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

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

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

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

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

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

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

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

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

しかし、私は同意します。この動作は、ネイティブイベントと比較するとバグが多いようです。

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

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

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

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

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

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

このやや望ましくない動作が予想される場合は、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);
    });

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

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

<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");
}
});

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

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

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

JSFIDDLE

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

http://jsbin.com/uwupa/edit

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

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

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いません。}

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

});

最も速くて簡単な方法：

$('#myCheckbox').change(function(){
    alert(this.checked);
});

$el[0].checked;

$ el-選択のjquery要素です。

楽しい！

if ($.browser.msie) {
    $("#myCheckbox").click(function() { $(this).trigger('change'); });
}

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