捕获复选框的选中的更改事件

小开

使用单击事件以获得与 MSIE 的最佳兼容性

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

小开

最佳答案

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


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

编辑: 如果复选框因为其他原因(比如使用键盘)而发生变化，这样做将无法捕捉到。为了避免这个问题，请听 change而不是 click。

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

小开

使用检查完毕选择器确定复选框的状态:

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

小开

$(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>

小开

使用下面的代码片段来实现这一点:

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

小开

如果我们有一个附加到输入复选框的标签，单击会影响标签吗？

我认为最好使用. change ()函数

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


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

小开

对于 JQuery 1.7 + 的使用:

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

小开

根据我的经验，我不得不利用这次活动的当前形势。目标:

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

小开

这段代码满足您的需要:

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


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

还有，你可以在 Jsfiddle上检查一下