表单换按钮替代单选框后求和失效，需插入匹配结果并实现按钮高亮

核心失效原因 #

• 此前基于radio原生控件的求和逻辑，依赖FormData自动收集原生表单控件的value属性完成取值；替换为button后，button不属于可被表单自动收集的原生可提交控件，原有遍历表单控件取值的逻辑自然无法捕获按钮携带的数值，导致求和计算失效。
• 原生radio点击后会自动标记选中态，button没有内置的选中状态标记逻辑，也无法自动同步激活样式。

交互与逻辑改造步骤 #

• 选中状态与高亮交互实现
  • 给每个题目下的4个选项按钮追加type="button"属性，避免点击选项时误触发表单默认刷新提交
  • 为按钮绑定统一点击事件：点击按钮时，先定位当前按钮所属的题目容器，清除该容器下所有选项按钮的激活类名，再给当前点击按钮追加带橙色高亮样式的active类，实现同题选项互斥选中的效果
  • 按钮携带的固定数值，通过自定义属性data-score存储，替代原有依赖原生value的取值渠道
• 求和逻辑适配改造
  • 放弃原有遍历原生表单控件取值的逻辑，在表单提交回调中，遍历全表所有带active类的选项按钮
  • 读取每个激活按钮的data-score属性值，转换为数字类型后累加得到总得分
  • 按照预设的分数区间规则，匹配对应配置文本插入到指定目标div中
• 提交流程保留
  • 原有基于onsubmit的分支判断逻辑无需大幅改动，只需要把取值来源从原生radio控件替换为激活按钮的自定义属性即可

核心参考代码 #

// 绑定选项按钮点击交互
document.querySelectorAll('.survey-option').forEach(btn => {
  btn.addEventListener('click', function() {
    // 清除同题目组下所有按钮的激活状态
    const group = this.closest('.survey-question')
    group.querySelectorAll('.survey-option').forEach(item => {
      item.classList.remove('active')
    })
    // 标记当前按钮为激活态
    this.classList.add('active')
  })
})

// 表单提交时的求和与结果渲染
document.querySelector('#surveyForm').addEventListener('submit', (e) => {
  e.preventDefault()
  let total = 0
  // 遍历所有激活的选项累加分数
  document.querySelectorAll('.survey-option.active').forEach(activeBtn => {
    total += Number(activeBtn.dataset.score)
  })
  // 按照原有分数规则匹配文本，插入到目标div
  const targetDiv = document.querySelector('#resultContainer')
  // 匹配逻辑复用原有代码即可
})

适配注意事项 #

• 橙色高亮的样式直接绑定在.survey-option.active选择器上即可，无需做样式兼容性处理，自定义灵活度远高于原生radio
• 不需要将button强行伪装成radio控件接入表单原生提交流程，用类标记选中态、自定义属性存值的方式，能完全兼容原有radio时期的求和判断逻辑
• 若需要校验是否所有题目都已完成选择，只需要遍历每道题的容器，判断是否存在激活按钮即可，逻辑和radio时期的校验完全一致

内容的提问来源于stack exchange，提问作者BigD