130

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

4

9 に答える 9

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

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

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

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

于 2009-09-21T15:50:11.320 に答える
46

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

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

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

$("#something").change( function(){
  alert("state changed");
});
于 2012-01-04T08:31:00.707 に答える
29

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

$('input[type=checkbox]').click(function() {
    if($(this).is(':checked')) {
        ...
    } else {
        ...
    }
});
于 2009-09-21T15:51:10.450 に答える
14

JQuery 1.7 以降の場合:

$('input[type=checkbox]').on('change', function() {
  ...
});
于 2014-06-18T20:56:10.993 に答える
3

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

$("#dingus").click( function (event) {
   if ($(event.currentTarget).is(':checked')) {
     //checkbox is checked
   }
});
于 2015-04-27T05:30:03.557 に答える
2

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

$(document).ready(function() {
    $("input[type=checkbox]").click(function() {
        alert("state changed");
    });
});
于 2009-09-21T15:48:23.540 に答える
-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>
于 2009-09-21T15:57:36.863 に答える