web-dev-qa-db-ja.com

チェックボックスのチェック済み変更イベントをキャッチ

JQueryで<input type="checkbox" />のチェック/チェック解除イベントをキャッチするにはどうすればよいですか？

jqueryunchecked
120
omg
<input type="checkbox" id="something" />

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

編集：キーボードの使用など、クリック以外の理由でチェックボックスが変更されても、これを実行してもキャッチされません。この問題を回避するには、changeの代わりにclickを聞いてください。

プログラムでチェック/チェック解除するには、 チェックボックス変更イベントがトリガーされないのはなぜですか？

161
marcgg

入力チェックボックスにラベルが添付されている場合、クリックはラベルに影響しますか？

.change（）関数を使用する方が良いと思います

<input type="checkbox" id="something" />

$("#something").change( function(){
  alert("state changed");
});
41
Dídac Rios

：checked セレクターを使用して、チェックボックスの状態を確認します。

$('input[type=checkbox]').click(function() {
    if($(this).is(':checked')) {
        ...
    } else {
        ...
    }
});
25
karim79

JQuery 1.7+の場合：

$('input[type=checkbox]').on('change', function() {
  ...
});
12
Daniel De León

これを実現するには、以下のコードスニペットを使用します。

$('#checkAll').click(function(){
  $("#checkboxes input").attr('checked','checked');
});

$('#UncheckAll').click(function(){
  $("#checkboxes input").attr('checked',false);
});

または、1つのチェックボックスで同じことを行うことができます。

$('#checkAll').click(function(e) {
  if($('#checkAll').attr('checked') == 'checked') {
    $("#checkboxes input").attr('checked','checked');
    $('#checkAll').val('off');
  } else {
    $("#checkboxes input").attr('checked', false);
    $('#checkAll').val('on'); 
  }
});

デモの場合： http://jsfiddle.net/creativegala/hTtxe/

4
Arun Kumar

私の経験では、イベントのcurrentTargetを活用する必要がありました。

$("#dingus").click( function (event) {
   if ($(event.currentTarget).is(':checked')) {
     //checkbox is checked
   }
});
3
Brandon Aaskov

mSIEとの最高の互換性のためにクリックイベントを使用する

$(document).ready(function() {
    $("input[type=checkbox]").click(function() {
        alert("state changed");
    });
});
2
Ty W

このコードはあなたの必要なことをします：

<input type="checkbox" id="check" >check it</input>

$("#check").change( function(){
   if( $(this).is(':checked') ) {
        alert("checked");
    }else{
        alert("unchecked");
   }
});

また、 jsfiddle で確認できます

1
Deepak saini