用事件委托配合matches实现邮件多选：监听.mail-list的change事件，用e.target.matches('.mail-checkbox')识别目标，通过value获取邮件ID，统一处理勾选、全选及indeterminate状态，并用Array.from+querySelectorAll批量提取已选项。
用事件委托配合 matches 实现邮件多选，核心是把监听逻辑从每个复选框移到父容器上，既避免动态增删时反复绑定，又提升性能和可维护性。
给邮件列表容器统一监听 change 事件
不要为每封邮件的 checkbox 单独加事件，而是监听整个邮件列表区域（如 .mail-list）的 change 事件。这样新增邮件无需重新注册监听器，也减少内存占用。
- 确保所有复选框有统一 class，比如
class="mail-checkbox" - 父容器需有明确标识，例如
<div class="mail-list"></div> - 用
document.querySelector('.mail-list').addEventListener('change', handler)绑定
在事件处理中用 matches 判断来源
触发 change 后，通过 e.target.matches('.mail-checkbox') 精准识别是否来自目标复选框，排除误触其他元素的可能。
- 只对匹配的 checkbox 执行后续逻辑，其余点击直接忽略
- 配合
e.target.id或e.target.value获取当前邮件唯一标识 - 若需区分“全选”复选框，可额外加 class 如
class="select-all"，再用e.target.matches('.select-all')分支处理
全选/反选状态同步要响应 indeterminate
当部分邮件被勾选时，“全选框”应显示中间态（—），这靠 indeterminate 属性控制，不能仅靠 checked。
- 监听完子项变化后，统计已勾选数量与总数，动态设置全选框的
checked和indeterminate - 全选框本身也走同一套委托逻辑：点击它时，用
querySelectorAll('.mail-checkbox')批量设值 - 注意避免在批量设值时再次触发 change 事件造成死循环——可临时移除监听或加标记跳过
批量动作触发前先安全提取 ID 列表
用户点“标记为已读”或“移动到标签”时，别遍历 DOM 取值，用现代 API 一次获取所有已勾选项的 value。
- 推荐写法：
Array.from(document.querySelectorAll('.mail-checkbox:checked')).map(el => el.value) - value 应设为邮件唯一 ID（如
msg_abc123），不建议用 index 或临时 id - 服务端接收格式建议为 JSON：
{"message_ids": ["msg_abc123", "msg_def456"]}，并校验 CSRF token
