jQueryチェックボックスのイベント処理

私は以下を持っています：

<form id="myform">
   <input type="checkbox" name="check1" value="check1">
   <input type="checkbox" name="check2" value="check2">
</form>

jQueryを使用して、発生したチェックイベントをキャプチャし、どのチェックmyformボックスがトグルされたか（およびトグルがオンかオフかがわかるか）を知るにはどうすればよいですか？

$('#myform :checkbox').change(function() {
    // this will contain a reference to the checkbox   
    if (this.checked) {
        // the checkbox is now checked 
    } else {
        // the checkbox is now no longer checked
    }
});

changeイベントを使用します。

$('#myform :checkbox').change(function() {
    // this represents the checkbox that was checked
    // do something with it
});

いくつかの有用な答えがありますが、最新のオプションすべてをカバーしているようには見えません。そのために、私のすべての例では、一致するlabel要素の存在にも対応しており、チェックボックスを動的に追加して、サイドパネルで結果を確認できます（リダイレクトすることによりconsole.log）。

• リスニングclickのイベントはcheckboxesありません、一致するところ作られているが、キーボードのトグルまたは変更のために許可されませんように良いアイデアlabelの要素がクリックされました。常にchangeイベントを聞いてください。

• :checkboxではなく、jQuery 疑似セレクターを使用してくださいinput[type=checkbox]。:checkbox短くて読みやすくなっています。

• チェックボックスがチェックされているかどうかをテストするにis()は、jQuery :checked疑似セレクターと一緒に使用します。これは、すべてのブラウザで機能することが保証されています。

既存の要素にアタッチされた基本的なイベントハンドラー：

$('#myform :checkbox').change(function () {
    if ($(this).is(':checked')) {
        console.log($(this).val() + ' is now checked');
    } else {
        console.log($(this).val() + ' is now unchecked');
    }
});

JSFiddle： http ://jsfiddle.net/TrueBlueAussie/u8bcggfL/2/

ノート：

• 使用する:checkbox使用に好適であるセレクタを、input[type=checkbox]
• これは、イベントが登録されたときに存在する一致する要素にのみ接続します。

祖先要素に接続された委任されたイベントハンドラー：

委任されたイベントハンドラーは、要素がまだ存在しない（動的にロードまたは作成される）可能性がある状況向けに設計されており、非常に便利です。彼らは責任を祖先要素（したがって、用語）に委任します。

$('#myform').on('change', ':checkbox', function () {
    if ($(this).is(':checked')) {
        console.log($(this).val() + ' is now checked');
    } else {
        console.log($(this).val() + ' is now unchecked');
    }
});

JSFiddle： http ://jsfiddle.net/TrueBlueAussie/u8bcggfL/4/

ノート：

• これは、イベント（この場合change）をリッスンして、変化しない祖先要素（この場合）にバブルアップすることによって機能し#myformます。
• これは、次いで、（jQueryのセレクタ適用':checkbox'要素のみにこの場合の）気泡鎖中。
• これは、その後、イベントを発生させただけで、それらのマッチング要素にイベントハンドラ関数を適用します。
• document他に近い/便利なものがない場合は、委任されたイベントハンドラーを接続するためのデフォルトとして使用します。
• bodyマウスイベントの取得を停止する可能性があるバグ（スタイリングに関連）があるため、委任されたイベントの添付には使用しないでください。

委任されたハンドラーの要点は、一致する要素はイベントハンドラーが登録されたときではなく、イベント時にのみ存在する必要があることです。これにより、動的に追加されたコンテンツでイベントを生成できます。

Q：遅いですか？

A： イベントがユーザーインタラクションの速度である限り、委任されたイベントハンドラーと直接接続されたハンドラーの間の速度のわずかな違いについて心配する必要はありません。委任の利点は、マイナーな欠点をはるかに上回ります。委任されたイベントハンドラーは、通常、単一の一致する要素に接続するため、実際には登録が高速です。

なぜイベントをprop('checked', true)発生させないのchangeですか？

これは実際には仕様によるものです。イベントが発生した場合は、更新が無限に続く状況に簡単に陥ります。代わりに、checkedプロパティを変更した後、trigger（ではなくtriggerHandler）を使用してchangeイベントを同じ要素に送信します。

たとえばtrigger、イベントが発生しない場合

$cb.prop('checked', !$cb.prop('checked'));

JSFiddle： http ://jsfiddle.net/TrueBlueAussie/u8bcggfL/5/

たとえばtrigger、通常の変更イベントでキャッチされます

$cb.prop('checked', !$cb.prop('checked')).trigger('change');

JSFiddle： http ://jsfiddle.net/TrueBlueAussie/u8bcggfL/6/

ノート：

• 委任されたイベントハンドラーにtriggerHandlerイベントをバブルしないので、1人のユーザーが提案したように使用しないでください。

JSFiddle： http ://jsfiddle.net/TrueBlueAussie/u8bcggfL/8/

それはもののますイベントハンドラのために働く直接接続されている要素に：

JSFiddle： http ://jsfiddle.net/TrueBlueAussie/u8bcggfL/9/

.triggerHandler（）でトリガーされたイベントは、DOM階層を浮き上がらせません。ターゲット要素によって直接処理されない場合は、何もしません。

リファレンス：http : //api.jquery.com/triggerhandler/

誰かがこれでカバーされていないと感じる追加機能を持っている場合は、追加を提案してください。

jQuery（1.7）の新しい 'on'メソッドの使用：http : //api.jquery.com/on/

    $('#myform').on('change', 'input[type=checkbox]', function(e) {
        console.log(this.name+' '+this.value+' '+this.checked);

    });

• イベントハンドラーは
• クリックするだけでなく、キーボードによってチェックボックスが変更されたかどうかをキャプチャします

$('#myform input:checkbox').click(
 function(e){
   alert($(this).is(':checked'))
 }
)

質問者が具体的にjQueryを要求し、選択された答えが正しいという事実を認めて、この問題は実際に言うには jQueryを必要としないことに注意する必要があります。この問題を解決せずに解決しonClickたい場合は、次のように、機能を追加したいチェックボックスの属性を設定するだけです。

HTML：

<form id="myform">
  <input type="checkbox" name="check1" value="check1" onClick="cbChanged(this);">
  <input type="checkbox" name="check2" value="check2" onClick="cbChanged(this);">
</form>

javascript：

function cbChanged(checkboxElem) {
  if (checkboxElem.checked) {
    // Do something special
  } else {
    // Do something else
  }
}

フィドル：http : //jsfiddle.net/Y9f66/1/

私は最初の答えからコードを試してみましたが、うまくいきませんが、私は遊んで、この仕事をしてくれました

$('#vip').change(function(){
    if ($(this).is(':checked')) {
        alert('checked');
    } else {
        alert('uncheck');
    }
});