html复选框选择状态函数,jQuery复选框选中状态更改事件

为了将来参考任何有困难的人，如果您动态添加复选框，上面正确接受的答案将无效。您需要利用事件委派，允许父节点捕获来自特定后代的冒泡事件并发出回调。

// $().on('', '', callback);

$(document).on('change', '.checkbox', function() {

if(this.checked) {

// checkbox is checked

}

});

请注意，几乎总是不必使用document父选择器。而是选择更具体的父节点，以防止将事件传播到太多级别。

下面的示例显示动态添加的dom节点的事件如何不触发先前定义的侦听器。$postList = $('#post-list');$postList.find('h1').on('click', onH1Clicked);function onH1Clicked() {

alert($(this).text());}// simulate added contentvar title = 2;function generateRandomArticle(title) {

$postList.append('

Title ' + title + '

');}setTimeout(generateRandomArticle.bind(null, ++title), 1000);setTimeout(generateRandomArticle.bind(null, ++title), 5000);setTimeout(generateRandomArticle.bind(null, ++title), 10000);

Title 1

Title 2

此示例显示事件委派的用法，以捕获特定节点的事件(h1在本例中)，并为此类事件发出回调。$postList = $('#post-list');$postList.on('click', 'h1', onH1Clicked);function onH1Clicked() {

alert($(this).text());}// simulate added contentvar title = 2;function generateRandomArticle(title) {

$postList.append('

Title ' + title + '

');}setTimeout(generateRandomArticle.bind(null, ++title), 1000); setTimeout(generateRandomArticle.bind(null, ++title), 5000); setTimeout(generateRandomArticle.bind(null, ++title), 10000);

Title 1

Title 2