开发测验应用：切换问题时如何每次获取新的复选框数组

嘿，这个场景我太熟悉了——做测验类应用的时候，最容易踩的就是“全局选择所有复选框”的坑。咱们只需要把选择范围限定在当前正在查看的测验问题里，就能完美解决这个问题，具体可以这么来实现：

核心思路很简单：不要全局查找所有.js-answer-check，而是只在用户当前点击的.quiz-questions范围内查找选中的复选框。下面给你两种常用的实现方式：

方式一：用「激活类」标记当前问题 #

先给当前活跃的测验问题加一个专属类（比如active-question），切换问题时更新这个类的归属，然后基于这个类来筛选复选框：

1. 监听问题切换事件，标记活跃问题 #

// 给所有测验问题绑定点击事件
document.querySelectorAll('.quiz-questions').forEach(question => {
  question.addEventListener('click', () => {
    // 移除所有问题的激活类
    document.querySelectorAll('.quiz-questions').forEach(q => q.classList.remove('active-question'));
    // 给当前点击的问题加上激活类
    question.classList.add('active-question');
    // 可选：清空之前的选中记录，避免干扰新问题
    window.selectedAnswers = [];
  });
});

2. 编写函数获取当前问题的选中答案 #

function getCurrentSelectedAnswers() {
  // 只在激活的问题下查找选中的复选框
  const checkedBoxes = document.querySelectorAll('.active-question .js-answer-check:checked');
  // 把NodeList转换成数组，并提取每个复选框的value
  return Array.from(checkedBoxes).map(box => box.value);
}

3. 保存时调用函数获取当前答案 #

document.getElementById('save-response').addEventListener('click', () => {
  const currentAnswers = getCurrentSelectedAnswers();
  // 这里把currentAnswers发送到服务器
  console.log('要保存的当前问题答案：', currentAnswers);
  // 替换成你的fetch/AJAX请求代码
  // fetch('/save-answer', { method: 'POST', body: JSON.stringify(currentAnswers) });
});

方式二：直接存储当前问题的DOM元素 #

如果不想加额外的类，也可以用一个变量直接保存当前点击的问题DOM元素，后续基于这个元素查找复选框：

// 全局变量存储当前活跃的问题DOM
let currentActiveQuestion = null;

// 监听问题点击
document.querySelectorAll('.quiz-questions').forEach(question => {
  question.addEventListener('click', () => {
    currentActiveQuestion = question;
    // 清空之前的选中记录
    window.selectedAnswers = [];
  });
});

// 获取当前答案的函数
function getCurrentSelectedAnswers() {
  if (!currentActiveQuestion) return []; // 处理未点击任何问题的情况
  const checkedBoxes = currentActiveQuestion.querySelectorAll('.js-answer-check:checked');
  return Array.from(checkedBoxes).map(box => box.value);
}

// 保存按钮逻辑和方式一一致
document.getElementById('save-response').addEventListener('click', () => {
  const currentAnswers = getCurrentSelectedAnswers();
  // 发送到服务器的代码...
});

额外优化：处理动态加载的问题 #

如果你的测验问题是通过AJAX动态加载的（比如翻页加载新问题），上面的直接绑定事件会失效，这时候用事件委托更靠谱：

// 假设所有测验问题都放在.quiz-container容器里
document.querySelector('.quiz-container').addEventListener('click', (e) => {
  // 找到点击的测验问题元素
  const targetQuestion = e.target.closest('.quiz-questions');
  if (targetQuestion) {
    // 更新激活类
    document.querySelectorAll('.quiz-questions').forEach(q => q.classList.remove('active-question'));
    targetQuestion.classList.add('active-question');
    currentActiveQuestion = targetQuestion;
  }
});

这样不管后续加载多少新问题，点击事件都能正常触发，完美适配动态内容~

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