Javascript - 如何检查 "certain"复选框而不是全部使用我当前的代码？

Question

所以我在一页上弹出了两个表格。这是我之前用来选择第一个表中的所有复选框(当时是唯一一个)的脚本:

<script>
  $('#selectAll').click(function() {
   if(this.checked) {
     $(':checkbox').each(function() {
       this.checked = true;                        
     });
   } else {
    $(':checkbox').each(function() {
     this.checked = false;                        
   });
  } 
});
</script>

如何将其更改为更具体？我是否需要将特定的类或 ID 属性添加到复选框才能使它起作用？

Answer 1

假设两个表都有类.table。适用于两个表的优化脚本版本如下所示:

$('.table').on('click', '.selectAll', function(e) {
    $(':checkbox', e.delegateTarget).prop('checked', this.checked);
});

注意事项:

1. 您的全选复选框必须具有 class .selectAll 而不是 id #selectAll。

2. 使用 .on 方法，我们将一个单击事件处理程序绑定(bind)到表，当单击 .selectAll 时触发。 e.delegateTarget 指向当前表的 DOMElement。那么$(':checkbox', e.delegateTarget) 表示在当前表中查找复选框。

3. 您可以使用 jQuery 的 prop 方法来代替使用 each 方法循环并设置 checked = true/false但更简洁。

演示:http://jsfiddle.net/pkp7osfn/