web-dev-qa-db-ja.com

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

私は次のものを持っています：

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

JQueryを使用してanymyformで発生するイベントをチェックし、どのチェックボックスが切り替えられたかを確認する方法（およびオン/オフが切り替えられたかどうかを知る方法）

jqueryhtmlcheckbox
128
aeq
$('#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
    }
});
221
Darin Dimitrov

変更イベントを使用します。

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

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

  • clickのcheckboxesイベントをリッスンすることはnotです。これは、キーボードの切り替えや、一致するlabel要素がクリックされた場所での変更を許可しないためです。常にchangeイベントをリッスンします。

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

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

既存の要素に接続された基本的なイベントハンドラー：

$('#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]を使用するよりも望ましい方法です
  • これにより、onlyが、イベントの登録時に存在した一致する要素に接続されます。

先祖要素にアタッチされた委任イベントハンドラー：

委任されたイベントハンドラは、要素がまだ存在しない（動的にロードまたは作成される）状況のために設計されており、very便利です。祖先要素に対するデリゲート責任（そのため用語）。

$('#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）にバブルアップすることで機能します。
  • thenは、jQueryセレクター（この場合は':checkbox'）をエレメントバブルチェーンのみに適用します。
  • thenは、イベントハンドラー関数を、イベントを引き起こした一致する要素のみに適用します。
  • 近くに/便利なものが他にない場合は、documentをデフォルトとして使用して、委任されたイベントハンドラを接続します。
  • bodyを使用して委任されたイベントをアタッチしないでください。マウスイベントの取得を停止する可能性があるバグ（スタイリングに関連する）があります。

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

Q：遅いですか？

A：イベントがユーザー相互作用の速度である限り、速度の無視できるの違いを心配する必要はありません。委任されたイベントハンドラーと直接接続されたハンドラーの間。委任の利点は、小さな欠点をはるかに上回ります。委任されたイベントハンドラーは通常、単一の一致する要素に接続するため、実際には登録する方が速いです。

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

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

例えば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/

注：

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

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

willは、イベントハンドラー直接接続されたに対して機能しますが：

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

.triggerHandler（）でトリガーされたイベントは、DOM階層をバブルアップしません。ターゲット要素によって直接処理されない場合、何も実行されません。

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

これでカバーされないと思われる追加機能がある場合は、追加を提案してください。

42
Gone Coding

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

    });
  • イベントハンドラは存続します
  • クリックするだけでなく、キーボードでチェックボックスが変更された場合にキャプチャします
28
Allen Hamilton
$('#myform input:checkbox').click(
 function(e){
   alert($(this).is(':checked'))
 }
)
5
Thinker

質問者が具体的にjQueryを要求し、選択された答えが正しいという事実を認めると、この問題は実際にはneedjQueryごとではないことに注意する必要があります。この問題を解決せずに解決したい場合は、追加機能を追加するチェックボックスの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/

4
Chase Sandmann

私は最初の答えからコードを試してみましたが、機能していませんが、私は遊んでいて、この仕事は私のために

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