捕获复选框的已检查更改事件

125

如何<input type="checkbox" />使用jQuery 捕获check / uncheck事件？

jquery unchecked

— 我的天啊
source

1

如果您使用的是相对较新版本的JQuery，我将使用.on（'change'，function（）{...}），如下面@Daniel De Leon的答案所述。一个优点是，“ on”事件侦听器将绑定到动态生成的html。

— BLang

172

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

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

编辑：如果复选框由于单击以外的其他原因而发生更改（例如使用键盘），则不会执行此操作。为避免此问题，请使用change代替click。

要以编程方式检查/取消选中，请查看为什么未触发我的复选框更改事件？

— 马克格
source

document.getElementById（'something'）。checked有效，为什么$（'＃something'）。checked不起作用？

— omg

您的代码缺少paran，实际上应该使用jQuery的方式来获取检查状态。

— 皮特·米肖

2

Shore：getElementById起作用的原因是它返回了DOM元素，而$ jQuery函数返回了jQuery对象。jQuery对象具有DOM元素作为属性，但它本身不是DOM对象。

— 皮特·米肖

3

我知道我迟到了派对，但这仅在“ click”事件触发此事件时起作用。如果由于某种原因您打算在代码的其他位置执行类似的操作：$（“＃something”）。attr（“ checked”，“ checked”），则单击事件将永远不会触发。

— David Stinemetze'1

3

@DavidStinemetze：我想说你可以听很多change而不是点击。我正在更新答案

— marcgg 2012年

44

如果我们在输入复选框上附加了一个标签，单击将影响标签。

我认为最好使用.change（）函数

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

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

— DídacRios
source

1

这应该是公认的答案，因为问题是关于侦听检查事件，而不是单击事件。

— 杰西卡

26

使用：checked选择器确定复选框的状态：

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

— karim79
source

13

对于JQuery 1.7+，请使用：

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

— 丹尼尔·德莱昂
source

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/

— 阿伦·库玛（Arun Kumar）
source

3

以我的经验，我不得不利用事件的currentTarget：

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

— 布兰登·阿斯科夫（Brandon Aaskov）
source

3

此代码满足您的需求：

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

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

另外，您可以在jsfiddle上进行检查

— 迪帕克赛尼
source

2

使用click事件获得与MSIE的最佳兼容性

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

— 泰威
source

如何判断是否已选中？

— 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>

— 桑托什
source

15

嗨，伙计，你在这里做什么？

— omg

看起来像是一个范围选择（例如，检查第一项，按住shift键，检查最后一项；然后检查所有之间的所有项。）但是，这远远超出了问题的要求。但是缺少一些代码，例如checkUncheckAll（）。

— joelsand 2011年