jQuery 捕获复选框的选中更改事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1455223/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Catch checked change event of a checkbox
提问by omg
How do I to catch check/uncheck event of <input type="checkbox" />with jQuery?
如何<input type="checkbox" />使用 jQuery捕获检查/取消检查事件？
回答by marcgg
<input type="checkbox" id="something" />
$("#something").click( function(){
if( $(this).is(':checked') ) alert("checked");
});
Edit: Doing this will not catch when the checkbox changes for other reasons than a click, like using the keyboard. To avoid this problem, listen to changeinstead of click.
编辑：当复选框因单击以外的其他原因（例如使用键盘）而发生更改时，这样做不会被捕获。为了避免这个问题，请听change而不是click。
For checking/unchecking programmatically, take a look at Why isn't my checkbox change event triggered?
要以编程方式选中/取消选中，请查看为什么我的复选框更改事件未触发？
回答by Dídac Rios
The click will affect a label if we have one attached to the input checkbox?
如果我们在输入复选框上附加了一个标签，点击会影响标签吗？
I think that is better to use the .change() function
我认为最好使用 .change() 函数
<input type="checkbox" id="something" />
$("#something").change( function(){
alert("state changed");
});
回答by karim79
回答by Daniel De León
For JQuery 1.7+ use:
对于 JQuery 1.7+ 使用：
$('input[type=checkbox]').on('change', function() {
...
});
回答by Arun Kumar
Use below code snippet to achieve this.:
使用下面的代码片段来实现这一点。：
$('#checkAll').click(function(){
$("#checkboxes input").attr('checked','checked');
});
$('#UncheckAll').click(function(){
$("#checkboxes input").attr('checked',false);
});
Or you can do the same with single check box:
或者您可以使用单个复选框执行相同操作：
$('#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');
}
});
For demo: http://jsfiddle.net/creativegala/hTtxe/
回答by Brandon Aaskov
In my experience, I've had to leverage the event's currentTarget:
根据我的经验，我不得不利用事件的 currentTarget：
$("#dingus").click( function (event) {
if ($(event.currentTarget).is(':checked')) {
//checkbox is checked
}
});
回答by Deepak saini
回答by Ty W
use the click event for best compatibility with MSIE
使用 click 事件以获得与 MSIE 的最佳兼容性
$(document).ready(function() {
$("input[type=checkbox]").click(function() {
alert("state changed");
});
});
回答by santosh
$(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:
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>
