本文解决点击“Select all”链接无法正确勾选/取消勾选表格内所有复选框的问题，核心在于修正事件逻辑——将 selectAll 元素误当复选框使用，并提供健壮、可复用的 JavaScript 实现方案。
本文解决点击“select all”链接无法正确勾选/取消勾选表格内所有复选框的问题，核心在于修正事件逻辑——将 `selectall` 元素误当复选框使用，并提供健壮、可复用的 javascript 实现方案。
在实际开发中，常需通过一个“全选/反选”操作控制多个复选框（如视频列表中的批量删除）。但初学者容易陷入一个典型误区：将触发元素（如 ）当作复选框本身处理，误用 selectAllCheckbox.checked ——而 标签根本没有 checked 属性，该值始终为 undefined，导致 checkbox.checked = undefined（等价于 false），所有复选框被强制设为未选中，且无法实现真正的“切换”。
✅ 正确做法是：不依赖 #selectAll 的 checked 状态（它不存在），而是对每个目标复选框执行取反操作（!checkbox.checked），从而实现“点击一次全选，再点一次全取消”的交互体验。
以下是优化后的完整代码示例：
<!-- 表头中的 Select all 链接 -->
<th>
<a href="#" id="selectAll">Select all</a>
</th>
<!-- 表格数据行中的复选框（可有多行） -->
<td>
<div class="d-flex align-items-center justify-content-end">
<div class="delete-video me-5" style="margin-bottom: 0.25rem">
<span class="iconify trash" data-icon="material-symbols-light:delete-outline" data-inline="false"></span>
</div>
<div class="form-check">
<input class="form-check-input video-checkbox" type="checkbox" value="">
</div>
</div>
</td>
<!-- 可重复多个 <td>...<td> -->
document.addEventListener("DOMContentLoaded", function () {
const selectAllLink = document.querySelector("#selectAll");
const checkboxes = document.querySelectorAll(".video-checkbox");
selectAllLink.addEventListener("click", function (e) {
e.preventDefault(); // 阻止 <a> 默认跳转行为，避免页面刷新或跳转
checkboxes.forEach(function (checkbox) {
checkbox.checked = !checkbox.checked;
});
});
});</a>
⚠️ 关键注意事项：
- 必须调用 e.preventDefault()：否则 点击会触发页面滚动至顶部，干扰用户体验；
- 避免误读 DOM 元素类型：querySelector("#selectAll") 返回的是 元素，不是 ，切勿访问其 .checked 属性；
- 如需支持“真正全选/全不选”（而非切换），建议改用独立的全选复选框（如 ），并监听其 change 事件同步子项；
- 若表格动态渲染，应将事件委托或在 DOM 更新后重新绑定逻辑，确保 querySelectorAll 获取到最新节点。
此方案简洁、兼容性强，适用于 Bootstrap 表单样式及各类现代前端框架集成场景。
