チェックボックスのチェックされた変更イベントをキャッチする

125

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

jquery unchecked

— ああ、神様
ソース

1

JQueryの比較的新しいバージョンを使用している場合は、@ Daniel De Leonの回答で後述するように、.on（ 'change'、function（）{...}）を使用します。利点は、「on」イベントリスナーが動的に生成されたhtmlにバインドされることです。

— ブラング2018年

172

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

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

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

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

— マルク
ソース

document.getElementById（ 'something'）。checkedが機能するのに、なぜ$（ '＃something'）。checkedが機能しないのですか？

— omg

あなたのコードにはパランがありません、そしてチェック状態を取得するためにjQueryの方法を実際に使うべきです。

— ピートミショー

2

ショア：getElementByIdが機能する理由は、それがDOM要素を返すのに対して、$ jQuery関数はjQueryオブジェクトを返すからです。jQueryオブジェクトはDOM要素をプロパティとして持っていますが、それ自体はDOMオブジェクトではありません。

— ピートミショー

3

私はパーティーに遅れて到着することを知っていますが、これは「クリック」イベントがこれをトリガーした場合にのみ機能します。なんらかの理由で、コードの別の場所で次のようなことをした場合：$（ "＃something"）。attr（ "checked"、 "checked"）クリックイベントはトリガーされません。

— David Stinemetze 2012年

3

@DavidStinemetze：changeクリックする代わりにトンを聞くことができると思います。答えを更新しています

— marcgg

44

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

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

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

$("#something").change( function(){
  alert("state changed");
});

— ディダックリオス
ソース

1

質問はクリックイベントではなく、チェックイベントをリッスンすることに関するものであるため、これは受け入れられる答えになるはずです。

— ジェシカ

26

使用にチェック：チェックボックスの状態を判断するために、セレクタを：

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

— karim79
ソース

13

JQuery 1.7以降の場合：

$('input[type=checkbox]').on('change', function() {
  ...
});

— ダニエル・デ・レオン
ソース

4

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

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

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

または、単一のチェックボックスで同じことを行うことができます：

$('#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/

— アルンクマール
ソース

3

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

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

— ブランドン・アスコフ
ソース

3

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

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

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

また、jsfiddleで確認することもできます

— ディーパック・サイニ
ソース

2

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

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

— タイW
ソース

チェックされているかどうかを判断する方法は？

— omg

クリックがチェックするかチェック解除するかを知る必要があります。

— omg

1

次に、$（this）.is（ '：checked'）を使用して、クリックしたアイテムの状態をテストできます

— Ty W

-1

$(document).ready(function(){
    checkUncheckAll("#select_all","[name='check_boxes[]']");
});

var NUM_BOXES = 10;
// last checkbox the user clicked
var last = -1;
function check(event) {
  // in IE, the event object is a property of the window object
  // in Mozilla, event object is passed to event handlers as a parameter
  event = event || window.event;

  var num = parseInt(/box\[(\d+)\]/.exec(this.name)[1]);
  if (event.shiftKey && last != -1) {
    var di = num > last ? 1 : -1;
    for (var i = last; i != num; i += di)
      document.forms.boxes['box[' + i + ']'].checked = true;
  }
  last = num;
}
function init() {
  for (var i = 0; i < NUM_BOXES; i++)
    document.forms.boxes['box[' + i + ']'].onclick = check;
}

HTML：

<body onload="init()">
  <form name="boxes">
    <input name="box[0]" type="checkbox">
    <input name="box[1]" type="checkbox">
    <input name="box[2]" type="checkbox">
    <input name="box[3]" type="checkbox">
    <input name="box[4]" type="checkbox">
    <input name="box[5]" type="checkbox">
    <input name="box[6]" type="checkbox">
    <input name="box[7]" type="checkbox">
    <input name="box[8]" type="checkbox">
    <input name="box[9]" type="checkbox">
  </form>
</body>

— Santosh
ソース

15

こんにちは、バディ、ここで何をしていますか？

— omg

範囲の選択のように見えます（つまり、最初の項目を確認し、Shiftキーを押しながら最後の項目を確認し、その間のすべての項目を確認します）。ただし、checkUncheckAll（）などの一部のコードがありません。

— joelsand