jQueryチェックボックスのチェック状態変更イベント


629

チェックボックスがオン/オフのときにイベントがクライアント側を起動するようにしたい:

$('.checkbox').click(function() {
  if ($(this).is(':checked')) {
    // Do stuff
  }
});

基本的には、ページのすべてのチェックボックスで発生するようにします。クリックで発砲して状態をチェックするこの方法は大丈夫ですか?

よりクリーンなjQueryの方法が必要だと思います。誰かが解決策を知っていますか?


この質問をもう一度尋ねる必要はありますか?非常に投票された同じ質問がstackoverflow ....に存在する場合、stackoverflow.com
questions / 901712 /

28
@Arifリンクされた質問はチェックボックスの状態を取得することに関するものであり、これはチェックされたイベントに関するものであるため、重複しているとは思わない。
レイチェル

1
私はいつもこれを達成するための多くの方法がありますが、このcheckedプロパティを検索する必要がここに書かれて
user3199690

回答:


1229

change代わりにイベントにバインドしclickます。ただし、チェックボックスがオンになっているかどうかを引き続き確認する必要があります。

$(".checkbox").change(function() {
    if(this.checked) {
        //Do stuff
    }
});

changeイベントよりもclickイベントにバインドすることの主な利点は、チェックボックスのすべてのクリックによって状態が変化するわけではないことです。チェックボックスの状態を変化させるイベントのみをキャプチャする場合は、適切な名前のchangeイベントが必要です。 コメントで編集されました

またthis.checked、要素をjQueryオブジェクトにラップしてjQueryメソッドを使用する代わりに使用したことにも注意してください。これは、DOM要素のプロパティに直接アクセスする方が短くて速いためです。

編集(コメントを参照)

すべてのチェックボックスを取得するには、いくつかのオプションがあります。あなたは使うことができます:checkbox疑似セレクターを。

$(":checkbox")

または、属性の等しいセレクターを使用することもできます。

$("input[type='checkbox']")

1
実際、クラスのチェックボックスを探しています。クラスに関係なくすべてのチェックボックスを取得するより良い方法はありますか?
AnonyMouse

4
@AnonyMouse-私の編集を参照してください。それを行うにはいくつかの方法があります。
James Allardice、2011

18
@Vigrond-実際には、ラベルをクリックすると、関連するコントロールでクリックイベントがトリガーされます。jsfiddle.net
James Allardice

4
これはよりもずっときれいです$(this).is(':checked')changeキーボードからの変更(タブ移動、スペースヒット)を検出する場合は、イベントを使用する必要があると思いましたが、驚くべきことに、clickマウスクリックによるものではない変更も検出します。jQueryの
ファンメンデス、

41
注意:ページ上のすべてのチェックボックスにイベントをバインドするとclickchange(チェックボックスの数によっては)パフォーマンスの問題が発生する可能性があります。親要素またはドキュメントにバインドして、バブルイベントをキャプチャしてみてください。すなわち$('form').on('change', ':checkbox', function(){ //stuff });
hitautodestruct

109

ここで問題が発生している人を参照するために、チェックボックスを動的に追加する場合、上記の正しい受け入れられた回答は機能しません。親ノードが特定の子孫からのバブルイベントをキャプチャしてコールバックを発行できるようにするイベント委任を利用する必要があります。

// $(<parent>).on('<event>', '<child>', callback);
$(document).on('change', '.checkbox', function() {
    if(this.checked) {
      // checkbox is checked
    }
});

document親セレクターを使用する必要はほとんどありません。代わりに、より具体的な親ノードを選択して、イベントが多すぎるレベルに伝播しないようにしてください。

以下の例は、動的に追加されたdomノードのイベントが、以前に定義されたリスナーをトリガーしない方法を示しています。

$postList = $('#post-list');

$postList.find('h1').on('click', onH1Clicked);

function onH1Clicked() {
  alert($(this).text());
}

// simulate added content
var title = 2;

function generateRandomArticle(title) {
  $postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}

setTimeout(generateRandomArticle.bind(null, ++title), 1000);
setTimeout(generateRandomArticle.bind(null, ++title), 5000);
setTimeout(generateRandomArticle.bind(null, ++title), 10000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
  <article class="post">
    <h1>Title 1</h1>
  </article>
  <article class="post">
    <h1>Title 2</h1>
  </article>
</section>

この例では、特定のノード(h1この場合)のイベントをキャプチャして、そのようなイベントのコールバックを発行するためのイベント委任の使用法を示しています。

$postList = $('#post-list');

$postList.on('click', 'h1', onH1Clicked);

function onH1Clicked() {
  alert($(this).text());
}

// simulate added content
var title = 2;

function generateRandomArticle(title) {
  $postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}

setTimeout(generateRandomArticle.bind(null, ++title), 1000); setTimeout(generateRandomArticle.bind(null, ++title), 5000); setTimeout(generateRandomArticle.bind(null, ++title), 10000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
  <article class="post">
    <h1>Title 1</h1>
  </article>
  <article class="post">
    <h1>Title 2</h1>
  </article>
</section>


23

ちょうど別の解決策

$('.checkbox_class').on('change', function(){ // on change of state
   if(this.checked) // if changed state is "CHECKED"
    {
        // do the magic here
    }
})

4
このコードは質問に答えることがありますが、このコードが質問に答える理由や方法に関する追加のコンテキストを提供すると、長期的な価値が向上します。
JAL

12

チェックされたチェックボックスにのみイベントをアタッチするつもりである場合(チェックを外して後でもう一度チェックすると起動します)、これが必要です。

$(function() {
    $("input[type='checkbox']:checked").change(function() {

    })
})

すべてのチェックボックス(チェック済みおよびチェックなし)にイベントを添付するつもりである場合

$(function() {
    $("input[type='checkbox']").change(function() {

    })
})

それらがチェックされているとき(チェックされていないとき)にのみ起動する場合は、上記の@James Allardiceが答えます。

ところでinput[type='checkbox']:checked、CSSセレクターです。


チェックされていないチェックボックスのみを検索するにはどうすればよいですか?これをすべてのチェック済み$( "#tableUSNW tbody tr td [id = td1]:checkbox:checked");に設定します。しかし、チェックされていないものをすべて見つける方法がわかりません。
FrenkyB

1
@FrenkyBは以下を試してください:$("input[type='checkbox']:not(:checked)")
Matas Vaitkevicius

5
$(document).ready(function () {
    $(document).on('change', 'input[Id="chkproperty"]', function (e) {
        alert($(this).val());
    });
});

3

イベントに基づいて実行されるアクション(クリックイベント)。

$('#my_checkbox').on('click',function(){
   $('#my_div').hide();
   if(this.checked){
     $('#my_div').show();
   }
});

イベントなしで、現在の状態に基づいてアクションを実行します。

$('#my_div').hide();
if($('#my_checkbox').is(':checked')){
  $('#my_div').show();
}

この場合、「クリック」イベントは機能しません。「変更」の作品。
Mehmood Memon

2

多分これはあなたのための代替物かもしれません。

<input name="chkproperty" onchange="($(this).prop('checked') ? $(this).val(true) : $(this).val(false))" type="checkbox" value="true" />`

2

これは、チェックボックスがオンになっているかどうかを確認するためのソリューションです。#prop()関数を使用する//

$("#c_checkbox").on('change', function () {
                    if ($(this).prop('checked')) {
                        // do stuff//
                    }
                });

1

このjQuery検証を試す

$(document).ready(function() {
  $('#myform').validate({ // initialize the plugin
    rules: {
      agree: {
        required: true
      }

    },
    submitHandler: function(form) {
      alert('valid form submitted');
      return false;
    }
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>

<form id="myform" action="" method="post">
  <div class="buttons">
    <div class="pull-right">
      <input type="checkbox" name="agree" /><br/>
      <label>I have read and agree to the <a href="https://stackexchange.com/legal/terms-of-service">Terms of services</a> </label>
    </div>
  </div>
  <button type="submit">Agree</button>
</form>


1

非常に簡単です、これは私が使う方法です:

jQuery:

$(document).on('change', '[name="nameOfCheckboxes[]"]', function() {
    var checkbox = $(this), // Selected or current checkbox
        value = checkbox.val(); // Value of checkbox

    if (checkbox.is(':checked'))
    {
        console.log('checked');
    }else
    {
        console.log('not checked');
    }
});

よろしく!

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.