jQuery复选框选中状态更改事件

25 浏览
0 Comments

jQuery复选框选中状态更改事件

当复选框被选中/取消选中时，我想在客户端触发一个事件：

$('.checkbox').click(function() {
  if ($(this).is(':checked')) {
    // Do stuff
  }
});

基本上，我希望它发生在页面上的每个复选框上。 这种通过点击触发并检查状态的方式可以吗？

我认为一定有一种更简洁的jQuery方法。 有人知道解决方案吗？

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

对于在此处遇到困难的任何人的参考，如果您正在动态添加复选框，则上面的正确的被接受的答案将不起作用。您需要利用事件委托，它允许父节点捕获来自特定后代的冒泡事件并发出回调。

// $().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 content
var 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 content
var 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

0
0 Comments

绑定到change事件而不是click事件。但是，您可能仍然需要检查复选框是否被选中：

$(".checkbox").change(function() {
    if(this.checked) {
        //Do stuff
    }
});

与click事件相比，绑定change事件的主要优点是，并非所有的复选框点击都会导致其状态更改。如果您只想捕捉导致复选框更改状态的事件，则需要名称合适的change事件。已在注释中删除

还要注意，我使用了this.checked而不是将元素包装在jQuery对象中并使用jQuery方法，只是因为直接访问DOM元素的属性更短，更快。

编辑（请参见注释）

要获取所有复选框，您有几个选项。您可以使用:checkbox伪选择器：

$(":checkbox")

或者您可以使用属性等于选择器：

$("input[type='checkbox']")

0