实时计算矩阵打分表单平均分需监听change事件、遍历已选radio、按data-question-id去重计题数，求和后除以作答题数并保留两位小数显示。
在 HTML 问卷调查中实现矩阵打分表单（如 Likert 量表）的平均分实时计算，核心是监听用户输入、收集所有有效评分项、动态求平均并更新显示。不需要后端或框架，纯前端用 JavaScript 即可完成。
结构设计：语义化矩阵表格 + data 属性标记
用 <table> 或语义化的 <div role="grid"> 构建矩阵，每行一个题项，每列一个分数选项（如 1–5）。关键点：
- 每个单选按钮（
<input type="radio">）需有相同name（按题区分），且带value表示分值（如value="3"） - 为每道题的 radio 组添加统一的
data-question-id，便于后续聚合 - 预留一个容器显示平均分，例如：
<span id="avg-score">--</span>
实时监听：用事件委托绑定 change 事件
避免为每个 radio 单独绑定事件，推荐用事件委托提升性能：
- 监听整个矩阵容器（如
document.getElementById("matrix")）的change事件 - 触发时，遍历所有已选中的 radio（
document.querySelectorAll('input[type="radio"]:checked')） - 过滤出属于本矩阵的选项（可检查
closest('[data-question-id]')或统一父 class）
计算逻辑：只计入已作答题目，排除空题
平均分应基于“已作答题数”，不是总题数。代码逻辑示例：
立即学习“前端免费学习笔记（深入）”；
function updateAverage() {
const checkedRadios = document.querySelectorAll('#matrix input[type="radio"]:checked');
let sum = 0;
let count = 0;
checkedRadios.forEach(radio => {
// 确保该题只计一次（同一题多个选项只取当前选中的）
const questionId = radio.closest('[data-question-id]')?.dataset.questionId;
if (questionId) {
sum += parseFloat(radio.value) || 0;
count++;
}
});
const avg = count > 0 ? (sum / count).toFixed(2) : '--';
document.getElementById('avg-score').textContent = avg;
}
调用 updateAverage() 在每次 change 事件后即可。
增强体验：支持清空、防误触与小数位控制
实际使用中还需注意：
- 用户取消选择某题时（如先选再点同组另一项，浏览器自动取消前一项），
:checked仍准确，无需额外处理 - 若允许“暂不评分”，可加一个
value=""的空选项，并在计算中跳过!radio.value的项 - 平均分显示建议保留 2 位小数（
.toFixed(2)），但内部计算保持精度 - 可加 CSS 过渡让数字变化更柔和：
#avg-score { transition: content 0.2s ease; }（注意：content 不支持过渡，改用 opacity 或 transform 模拟）
不复杂但容易忽略细节——关键是把“题”作为单位来统计，而不是把“选项”当独立数据源。只要结构清晰、事件可靠、计算严谨，平均分就能真正实时响应用户操作。
