如何让表格的全选复选框仅选中可见行内的复选框？

这个需求很常见，我帮你调整一下脚本，让它只对可见行里的复选框生效：

修改后的完整代码 #

$('#select-all').click(function (event) {
  // 仅选中/取消选中可见行内的复选框，排除全选框本身
  $('tr:visible :checkbox').not('#select-all').prop('checked', this.checked);
});

关键改动说明： #

• 精准定位可见行：用tr:visible筛选出所有可见的表格行，jQuery的:visible选择器会自动识别display: none或者其他方式隐藏的元素，比硬写[style="display: table-row;"]更灵活（比如后续用CSS类控制显示隐藏也能兼容）。
• 缩小复选框范围：在可见行的基础上用:checkbox找到里面的复选框，避免选中页面上其他无关的复选框。
• 排除全选框本身：通过.not('#select-all')确保我们不会重复操作触发点击事件的这个全选复选框（虽然不排除也能工作，但这样逻辑更严谨）。
• 简化代码逻辑：直接用prop('checked', this.checked)批量设置复选框状态，不用写冗余的if-else和each循环，jQuery会自动遍历匹配的元素。

如果你确实需要严格匹配style="display: table-row;"的行（而不是所有可见行），可以把选择器改成这样：

$('tr[style="display: table-row;"] :checkbox').not('#select-all').prop('checked', this.checked);

不过这种方式局限性比较大，一旦行的样式属性有空格（比如style="display: table-row; margin: 0;"）就匹配不到了，所以更推荐用:visible版本。

内容的提问来源于stack exchange，提问作者ɐsɹǝʌ ǝɔıʌ