测验页面多组单选按钮选项单独随机排序的实现问题

我懂你现在的需求——测验页面里每个问题的单选按钮组都要各自随机打乱顺序，之前找到的单组方案没法处理多组的情况对吧？别担心，咱们可以通过分组定位+独立洗牌的方式解决这个问题，具体实现如下：

第一步：给每组单选按钮加独立容器 #

首先得把每个问题的单选按钮用独立容器包起来，这样才能精准区分不同的组。推荐用<fieldset>，语义化更好，也方便定位：

<!-- 问题1 -->
<fieldset class="question-set">
  <legend>问题1：以下哪个是JavaScript的原始数据类型？</legend>
  <label><input type="radio" name="quiz-q1" value="opt1"> Array</label>
  <label><input type="radio" name="quiz-q1" value="opt2"> String</label>
  <label><input type="radio" name="quiz-q1" value="opt3"> Object</label>
</fieldset>

<!-- 问题2 -->
<fieldset class="question-set">
  <legend>问题2：CSS中控制外边距的属性是？</legend>
  <label><input type="radio" name="quiz-q2" value="opt1"> padding</label>
  <label><input type="radio" name="quiz-q2" value="opt2"> margin</label>
  <label><input type="radio" name="quiz-q2" value="opt3"> border</label>
</fieldset>

第二步：用JavaScript实现分组洗牌逻辑 #

核心思路是先找到所有问题容器，然后对每个容器内的选项单独执行随机排序。这里用Fisher-Yates洗牌算法，它是目前最公平高效的随机排序方式，不会出现偏序问题：

// 页面加载完成后执行排序
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有问题组容器
  const allQuestionSets = document.querySelectorAll('.question-set');
  
  // 遍历每个问题组，单独处理
  allQuestionSets.forEach(set => {
    // 把当前组内的选项（label元素）转成数组
    const options = Array.from(set.querySelectorAll('label'));
    
    // Fisher-Yates洗牌函数
    function shuffleOptions(arr) {
      for (let i = arr.length - 1; i > 0; i--) {
        // 生成0到i的随机索引
        const randomIndex = Math.floor(Math.random() * (i + 1));
        // 交换当前元素和随机元素的位置
        [arr[i], arr[randomIndex]] = [arr[randomIndex], arr[i]];
      }
      return arr;
    }
    
    // 打乱选项顺序
    const shuffledOpts = shuffleOptions(options);
    
    // 清空原容器，先放回问题标题（legend），再插入打乱后的选项
    set.innerHTML = '';
    const legend = set.querySelector('legend');
    if (legend) set.appendChild(legend);
    shuffledOpts.forEach(opt => set.appendChild(opt));
  });
});

关键细节解释 #

• 分组隔离：通过.question-set类精准定位每组按钮，确保每个问题的选项只在自己组内打乱，不会和其他组的选项混在一起。
• 保留语义结构：代码中特意保留了<legend>元素，保证问题标题不会被打乱，只重排选项部分，页面结构更清晰。
• 高效公平的洗牌：Fisher-Yates算法通过原地交换元素实现随机排序，时间复杂度是O(n)，比用sort(() => Math.random() - 0.5)更可靠（后者可能出现元素排序不均匀的情况）。

这样页面加载完成后，每个问题的单选按钮选项就会各自随机排列啦。

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