能否在JavaScript的querySelector中通过变量拼接遍历name为questionN的单选按钮

你的动态拼接选择器的思路是合法的，运行报错是两个错误导致的：

• 序号偏移错误：循环变量i初始值为1，你在插值时额外加了1，实际匹配的name是question2到question6，如果你的单选按钮组只到question5，最后一次查询会匹配不到元素返回null，调用null.value就会抛出错误。
• HTML实体误用：你在模板字符串里写的"是HTML场景下的引号转义实体，JS字符串不需要这种转义写法，直接用普通双引号/单引号包裹name属性值即可。

修正后的代码示例 #

// 定义数组存储所有题目的选中值
const selectedAnswers = []
for (let i = 1; i <= 5; i++) {
  // 先获取匹配的元素，不要直接取值
  const checkedRadio = document.querySelector(`input[name="question${i}"]:checked`)
  // 做空值判断，避免用户未选当前题时报错
  if (checkedRadio) {
    selectedAnswers.push(checkedRadio.value)
  } else {
    // 可自定义未选题的处理逻辑
    selectedAnswers.push(undefined)
  }
}
// 最终输出所有题的选中值
console.log(selectedAnswers)

优化建议 #

如果不想硬编码循环上限，可以先获取所有前缀为question的单选按钮组，自动计算需要遍历的题目数量，适配不同长度的表单。

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