矩阵表单整行勾选需用事件委托监听table点击，非checkbox目标时切换该行所有.matrix-row-check状态；name统一（如q5）、value语义化（如agree）；全选框根据:checked数量实时设checked/indeterminate；提交前用.queryselectorall(':checked')校验真实选中值。
矩阵表单中整行统一勾选，核心是让点击任意单元格（非复选框本身）时，自动切换该行所有复选框状态，同时保持与全选/反选、半选态逻辑一致。不能靠给 tr 绑 click，也不能逐个触发 checkbox 的 click 事件。
行级点击交互：委托监听 + 精准目标过滤
把点击事件绑定在 table 上，用事件委托判断点击位置：
- 用
e.target.closest('tr')找到被点击的行 - 检查
e.target是否为input[type="checkbox"]—— 如果是，不干预，留给原生行为处理 - 如果不是，则遍历该行内所有目标复选框（推荐加统一 class 如
matrix-row-check），设cb.checked = !cb.checked - 避免在
tr上写onclick，否则移动端易误触，iOS Safari 还有 300ms 延迟问题
每行多个复选框的 value 与 name 设计
矩阵题通常是一行一题、多列选项（如“非常不同意”到“非常同意”），需确保后端能区分题干和选项：
- 所有复选框共用同一组
name，例如name="q5"，表示第 5 题 - 每个复选框设唯一
value，对应选项语义，如value="strongly-disagree"、value="agree" - 不要用索引数字（如
value="0"），否则后端无法理解用户选择的实际含义 - 同一行禁止出现多个
checked—— 矩阵单选场景应改用radio；若确需多选（如“勾选所有适用项”），则保留checkbox并确保 name 一致
同步更新全选状态与 indeterminate 态
整行操作会影响整体选中统计，表头全选框需实时响应：
- 每次行内任一复选框变化后，重新计算：
document.querySelectorAll('.matrix-row-check:checked').length - 若数量为 0 → 全选框
checked = false，indeterminate = false - 若数量等于总复选框数 →
checked = true，indeterminate = false - 否则 →
indeterminate = true，并显式设checked = false（注意：indeterminate 不改变 checked 值，仅影响视觉） - 全选框自身 change 事件里，用
event.target.checked赋值给所有.matrix-row-check，不调用 click()
删除或提交前校验真实选中项
用户可能点了“提交”但一行都没选，不能只看 UI 高亮或行背景色：
- 提交前用
document.querySelectorAll('.matrix-row-check:checked')获取真实勾选项节点 - 遍历它们取
.value，组成数组发送，例如["neutral", "agree"] - 若结果为空数组，提示“请至少为每道矩阵题选择一项”，并中断提交
- 别依赖
getAttribute('checked')判断状态——它返回的是初始 HTML 属性，不是当前真实状态
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
