如何将一组radio buttons视为单个对象？JS测验问题切换需求

首先，你完全可以把每道包含单选按钮的题目当成单个对象来处理——只需要把每道题的所有内容（题目文本、单选按钮组、标签等等）都包裹在一个带quest类的容器（比如<div>）里就行，这样你的quests数组里的每个元素就对应一整道题啦～

先调整HTML结构 #

原来的<p>标签不太适合包裹表单元素（虽然浏览器可能兼容，但语义上不对），咱们换成<div>作为每道题的容器，把题目和单选按钮都放进去，同时注意id要唯一（你原来的代码里有重复的id="q1"，这个要改掉哦）：

<form id="form" action="#" runat="server">
  <!-- 第一道题 -->
  <div id="q1" class="quest">
    <p>问题1：你最喜欢的编程语言是？</p>
    <input type="radio" name="q1" value="js">JavaScript<br>
    <input type="radio" name="q1" value="py">Python<br>
    <input type="radio" name="q1" value="java">Java
  </div>

  <!-- 第二道题 -->
  <div id="q2" class="quest" style="display:none;">
    <p>问题2：你每天写代码的时间是？</p>
    <input type="radio" name="q2" value="1">1小时以内<br>
    <input type="radio" name="q2" value="3">1-3小时<br>
    <input type="radio" name="q2" value="5">3小时以上
  </div>

  <!-- 第三道题 -->
  <div id="q3" class="quest" style="display:none;">
    <p>问题3：你常用的代码编辑器是？</p>
    <input type="radio" name="q3" value="vscode">VS Code<br>
    <input type="radio" name="q3" value="webstorm">WebStorm<br>
    <input type="radio" name="q3" value="sublime">Sublime Text
  </div>

  <input type="button" id="btn" onclick="addCount()" value="下一题" />
</form>

你的JS函数几乎不用改！ #

原来的逻辑完全适用——因为现在quests数组里的每个元素就是一整道题（包含单选按钮的容器），切换它的display属性就能显示/隐藏整道题：

var count = 0;
function addCount() {
  var quests = document.getElementsByClassName("quest");
  
  // 隐藏上一道题（如果不是第一题）
  if (count > 0) {
    quests[count - 1].style.display = 'none';
  }
  
  // 显示当前题
  quests[count].style.display = 'block';
  count++;

  // 小优化：当到最后一题时禁用按钮
  if (count >= quests.length) {
    document.getElementById("btn").disabled = true;
    document.getElementById("btn").value = "已完成";
  }
}

简单解释下原理： #

1. 每个带quest类的<div>就是一道独立的题，里面可以放任何你需要的内容（文本、单选框、甚至图片）
2. 初始时只显示第一题，其他题都设为display:none隐藏
3. 点击按钮时，先隐藏上一题，再显示当前题，计数器count加1
4. 最后加了个小优化：当所有题都切换完，按钮就会禁用并提示“已完成”

这样你就能实现点击按钮切换整道题（包括单选按钮组）的效果啦～作为编程新手，你现在的思路已经很棒了，慢慢调整就能达到目标 😊

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