用HTML表格实现可交互矩阵评分题需用按行隔离name（如q1、q2），每行题干用，列头用，选项用包裹并关联唯一id，配合JavaScript分组校验必填。
怎么用 HTML 表格实现可交互的矩阵评分题
直接用 <table> 搭结构没问题，但“可交互”这件事，靠表格本身做不到——必须配合 <code><input type="radio"> 或 <input type="number">，且每行/每列要能独立选值。纯展示表格没有提交逻辑，用户点了也没反应。
常见错误是把所有单选按钮的 name 写成同一个（比如都叫 "score"），结果整张表只能选一个；正确做法是按**行维度**隔离：第1题的所有选项共用 name="q1"，第2题用 name="q2"，以此类推。
- 每一行代表一道题，
<tr> 里放题干 + 多个评分选项 <li>每个评分选项用 <code><input type="radio">，同题的name相同，value设为分值（如"1"、"5"） - 列头用
<th> 标明评分维度（如“非常不满意”→“非常满意”），不要用 <code><td> <li>加 <code>required属性可强制每行必选，但注意：老版本 Safari 对required在 radio 上支持不稳定 -
radio：适合离散分值（1–5 星、Likert 五点量表），语义清晰，移动端点选友好 -
number：适合连续分值或自定义区间，但必须加min、max、step，否则无效 - 别混用：同一行里既放 radio 又放 number，会破坏表单逻辑，后端收不到一致数据
- 每道题的题干单元格写成
<th scope="row">服务响应速度</th> - 每个评分选项外层包
<label></label>，内部<input>必须有唯一id，label用for指向它 - 列头写成
<th scope="col">非常不满意</th>，这样读屏能说出“行标题：服务响应速度，列标题：非常不满意” - 避免用
<div> 模拟表格，语义丢失后键盘 Tab 顺序和阅读逻辑全乱 <h3>提交前怎么确认用户填完了所有行</h3> <p>浏览器原生的 <code>required对 radio 有效，但只检查“该组是否有选中”，不保证“所有组都已选”。如果某行漏选，提交时焦点会跳到第一个无选中的radio组，但用户可能根本没注意到提示位置。更可靠的方式是用 JavaScript 遍历所有题组，检查每组是否至少有一个
checked。注意：别用querySelectorAll('input[type=radio]')后挨个查checked，得按name分组判断。- 获取所有不同
name值：Array.from(new Set([...document.querySelectorAll('input[type=radio]')].map(i => i.name))) - 对每个
name，查document.querySelectorAll('input[name="q1"]:checked').length > 0 - 发现未填项，聚焦到对应题干
<th> 并提示，别只弹 alert <li>别依赖 CSS 的 <code>:invalid伪类做样式反馈——radio 的 :invalid 触发条件苛刻，兼容性差
真正难的不是搭出表格，是让每行的语义、交互、校验、无障碍都闭环。少一个环节，用户就可能交不出完整数据。
- 获取所有不同
radio 和 number 类型怎么选：看评分规则是否允许多选或填空
矩阵题本质是“每行单选”，所以 <input type="radio"> 是默认选择。只有当业务允许自由打分（比如 0–100 分任意填）、或需要支持小数（如 4.5 分），才换用 <input type="number">。
用 number 的代价是失去点击切换的便捷性，且需额外校验范围（min/max）和步进（step="0.5"），否则用户可能输 999 或 -100。
立即学习“前端免费学习笔记（深入）”；
怎么让屏幕阅读器和键盘用户正常操作
矩阵题对残障用户很不友好，除非你主动补全语义。最常被忽略的是：没给每行题干加 <th scope="row">，也没给列头加 <code><th scope="col">，导致读屏软件无法关联“第3行第2列”对应哪道题、哪个分值。
<p>另一个坑是没用 <code><label></label> 包裹 radio —— 光靠 for/id 关联不够稳定，尤其在动态渲染时容易断链。
