如何在同一网页存储多个checkbox选中值以供后续使用

问题根因 #

• document.getElementsByName() 返回的是节点集合(NodeList)，不是单个DOM元素，不能直接访问.checked属性，需要遍历集合内的每个节点逐个判断
• HTML中所有Q1的复选框name属性统一为Q1，你的JS代码按Q1-1、Q1-2等name查询元素，匹配不到对应节点
• 未声明Q1_ticked、i等变量，会隐式转为全局变量，容易出现未定义报错

修复方案 #

第一步：封装通用取值函数 #

该函数对checkbox、radio类型的题目通用，不需要为每道题单独写逻辑：

// 传入题目的name属性，返回所有选中值组成的数组
function getCheckedValues(questionName) {
  const inputNodes = document.getElementsByName(questionName);
  const checkedList = [];
  for (let node of inputNodes) {
    if (node.checked) {
      checkedList.push(node.value);
    }
  }
  return checkedList;
}

第二步：调用函数收集答案 #

// 提前初始化全局存储答案的变量
let allAnswers = [];

// 提交Q1时调用的逻辑
function submitQ1() {
  // 获取Q1选中值，多选用逗号拼接，单选直接取数组第一个元素即可
  const q1Result = getCheckedValues('Q1').join(',');
  // 按你需要的格式拼接总答案
  allAnswers.push(`Q1:${q1Result}`);
  
  // 后续可以执行隐藏当前表单、展示下一题的逻辑
  console.log('Q1答案：', q1Result);
  console.log('累计总答案：', allAnswers.join('; '));
}

可选：优化HTML属性 #

你当前的HTML存在id重复、label与input不关联的问题，修改后点击label文本也可以选中复选框：

<form>
    <input type="checkbox" id="Q1-1" name="Q1" value="Q1-1">
    <label for="Q1-1"> Answer Choice 1 </label>
    <br>
    <input type="checkbox" id="Q1-2" name="Q1" value="Q1-2">
    <label for="Q1-2"> Answer Choice 2 </label>
    <br>
    <input type="checkbox" id="Q1-3" name="Q1" value="Q1-3">
    <label for="Q1-3"> Answer Choice 3 </label>
</form>

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