本文详解动态添加带单选按钮的答题选项时，因 name 属性不一致导致 Radio 无法互斥选择的核心问题，并提供可立即生效的修复方案与最佳实践。

本文详解动态添加带单选按钮的答题选项时，因 name 属性不一致导致 radio 无法互斥选择的核心问题，并提供可立即生效的修复方案与最佳实践。

在构建动态表单（如在线问卷、考试系统）时，常需为每个题目动态添加多个答案选项，并通过单选按钮（<input type="radio">）指定唯一正确答案。但开发者常遇到一个典型问题：新添加的答案项中，Radio 按钮无法与已有选项形成互斥组——即用户可同时选中多个，或切换后前一选项未自动取消。根本原因在于：HTML 中 Radio 按钮只有 name 属性完全相同时，浏览器才将其视为同一逻辑组，从而保证单选行为。

观察原始代码可发现关键错误：

• 初始 HTML 中，第一个答案的 Radio 的 name 为 "questions[1][correct_answer]"（注意是 [1]）；
• 而 JavaScript 函数 addAnswerInputGroup(1) 动态生成的新 Radio 使用的是 "questions[${questionIndex}][correct_answer]"，即 "questions[1][correct_answer]" —— 表面看一致；
• 但初始 DOM 中 <div class="card" id="questionCard1"> 对应的题目索引应为 <code>0（常见于零起点数组），而 questionIndex=1 实际指向第二个题目卡。更严重的是，初始示例中 <input> 的 name="questions[0][answers][]" 与 Radio 的 name="questions[1][correct_answer]" 索引错位，直接导致该 Radio 与任何其他选项 name 不匹配，彻底脱离单选组。

  ✅ 正确做法是：所有属于同一题目的正确答案 Radio，其 name 必须严格统一且与题目索引精确对应。例如，第 0 题的所有 Radio 应共用 name="questions[0][correct_answer]"，第 1 题则共用 name="questions[1][correct_answer]"。

  以下是修复后的完整实现：

  function addAnswerInputGroup(questionIndex) {
    const wrapper = document.querySelector(`#questionCard${questionIndex} .answer-input-groups`);
    const count = wrapper.querySelectorAll('.input-group.mb-3').length;
    const newId = `answerInput${count + 1}`;
  
    // ✅ 关键修复：Radio 的 name 必须与当前 questionIndex 严格一致，且所有同题 Radio 共享同一 name
    const html = `
      <div class="input-group mb-3" id="${newId}">
        <span class="input-group-text">
          <input type="radio" 
                 aria-label="Correct answer for question ${questionIndex}" 
                 name="questions[${questionIndex}][correct_answer]" 
                 value="${count}">
        </span>
        <span class="input-group-text">
          <input type="file" accept=".jpg,.gif,.png" />
        </span>
        <input type="text" 
               class="form-control" 
               name="questions[${questionIndex}][answers][]" 
               placeholder="Answer ${count + 1}">
      </div>
    `;
    wrapper.insertAdjacentHTML('beforeend', html);
  }

  对应 HTML 结构（务必确保 questionIndex 与 id 及 name 中的索引一致）：

  <div class="card" id="questionCard0">
    <div class="card-body">
      <h3 class="fs5">Question A</h3>
      <div class="answer-input-groups">
        <!-- ✅ 初始 Radio name="questions[0][correct_answer]" -->
        <div class="input-group mb-3">
          <span class="input-group-text">
            <input type="radio" name="questions[0][correct_answer]" value="0">
          </span>
          <span class="input-group-text">
            <input type="file" accept=".jpg,.gif,.png">
          </span>
          <input type="text" name="questions[0][answers][]" placeholder="Answer 1">
        </div>
      </div>
      <button type="button" class="btn btn-primary" onclick="addAnswerInputGroup(0)">
        Add Answer
      </button>
    </div>
  </div>

  ⚠️ 注意事项：

  • 避免重复 ID：示例中 <input id="multiplefileupload"> 在多个位置重复出现，违反 HTML 唯一性规范。应移除 id 或动态生成唯一 ID（如 id="file-upload-${questionIndex}-${count}"）；
  • 文件输入限制：每个文件输入框仅能上传单个文件；若需多图，建议使用 multiple 属性（<input type="file" multiple>）并配合 JS 处理；
  • 值（value）语义化：Radio 的 value 应代表该选项在答案数组中的索引（从 0 开始），便于后端准确识别正确答案；
  • 无障碍增强：为 Radio 添加 id 并关联 <label></label>，提升可访问性。

  总结：Radio 的互斥行为完全由 name 属性驱动，而非视觉位置或父容器。动态添加时，必须确保所有同题 Radio 的 name 字符串逐字相同，且索引与题目上下文严格对齐。遵循此原则，即可稳定实现多题、多选项下的正确答案单选逻辑。