检查复选框的更改事件

如何使用jQuery捕获/取消选中<input type="checkbox" />事件？检查复选框的更改事件

2009-09-21 omg

如果您正在使用JQuery的一个相对较新的版本，我会用的。对（“变”，函数（）{...}），如提及@Daniel De Leon的答案在下面。一个优点是，“on”事件监听器将绑定到动态生成的html。 – BLang 2018-03-08 14:31:47

127

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

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

编辑：这样做时复选框其他原因比点击变化，比如使用键盘不会赶上。为避免此问题，请收听change而不是click。

为了检查/编程取消选中，看看Why isn't my checkbox change event triggered?

来源

2009-09-21 15:50:11 marcgg

document.getElementById（'something'）。checked works，why $（'＃something'）。checked不行？ – omg 2009-09-21 15:52:45

你的代码缺少一个paran，并且确实应该使用获取检查状态的jQuery方法。 – 2009-09-21 15:53:16

因为$（'＃something'）返回一个jQuery对象而不是ElementNode – 2009-09-21 15:53:45

使用最好的兼容性click事件与MSIE

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

来源

2009-09-21 15:48:23

如何判断它是否被检查？ – omg 2009-09-21 15:50:06

我需要知道点击是否意味着检查或取消选中它。 – omg 2009-09-21 15:50:56

然后，您可以使用$（this）.is（'：checked'）来测试刚刚单击的项目的状态 – 2009-09-21 15:52:23

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

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

来源

2009-09-21 15:51:10 karim79

需要另一个括号在您的条件... if（$（this）... – 2009-09-21 15:55:11

@Ty W - 谢谢，修正 – karim79 2009-09-21 15:59:16

-2

$(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-21 15:57:36 santosh

+14

嗨！哥们，你在这里做什么？ – omg 2009-09-21 16:13:57

看起来像一个范围选择（即，检查第一项，按住Shift键，检查最后一个，然后检查所有的内容）。但是，这不仅仅是问题的要求，还缺少一些代码，如checkUncheckAll（）。 – joelsand 2011-07-06 02:03:28

使用下面的代码snipp等来实现这一目标。：

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

来源

2011-11-16 09:24:23

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

我认为这是更好地使用.change（）函数

3210

来源

2012-01-04 08:31:00

的jQuery 1.7+使用：

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

来源

2014-06-18 20:56:10

根据我的经验，我已经利用该事件的currentTarget当前：

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

来源

2015-04-27 05:30:03

此代码做什么你的需要：

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

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

此外，您可以检查它jsfiddle

来源

2016-09-07 13:35:33

检查复选框的更改事件

回答

相关问题