添加动态单选框时单选按钮选中状态异常问题

问题根源 #

核心问题是单选框分组不统一：

• 初始HTML中第一个问题的单选框name为questions[0][correct_answer]，但调用addAnswerInputGroup(1)时，新增单选框的name变成了questions[1][correct_answer]，属于两个独立分组，自然无法互斥切换。
• 额外问题：所有文件上传框的id都是multiplefileupload，违反HTML元素id唯一性规则，会导致后续DOM操作异常。

修复方案 #

1. 修正HTML中的函数调用参数

确保传入的问题索引与初始单选框的name索引一致：

<div class="card" id="questionCard1">
    <div class="card-body">
        <h3 class="fs5">A</h3>
        <div class="answer-input-groups">
            <div class="input-group mb-3">
                <span class="input-group-text"><input type="radio" aria-label="Radio for correct answer" name="questions[0][correct_answer]" value="0"></span>
                <span class="input-group-text"><input id="multiplefileupload-0-0" type="file" accept=".jpg,.gif,.png"></span>
                <input type="text" class="form-control" name="questions[0][answers][]" placeholder="Answer 1">
            </div>
        </div>
        <!-- 调整参数为0，与初始问题索引匹配 -->
        <button type="button" class="btn btn-primary" onclick="addAnswerInputGroup(0, 'questionCard1')">Add Answer</button>
    </div>
</div>

2. 优化JS函数逻辑

统一单选框分组，生成唯一的文件上传框id：

function addAnswerInputGroup(questionIndex, cardId) {
    var answerInputGroupWrapper = document.querySelector(`#${cardId} .answer-input-groups`);
    var existingGroups = answerInputGroupWrapper.querySelectorAll('.input-group.mb-3');
    var groupCount = existingGroups.length;

    // 生成唯一ID避免冲突
    var fileInputId = `multiplefileupload-${questionIndex}-${groupCount}`;
    var answerInputId = `answerInput-${questionIndex}-${groupCount + 1}`;

    var newAnswerInputGroup = `
        <div class="input-group mb-3" id="${answerInputId}">
            <span class="input-group-text"><input type="radio" aria-label="Radio for correct answer" name="questions[${questionIndex}][correct_answer]" value="${groupCount}"></span>
            <span class="input-group-text"><input id="${fileInputId}" type="file" accept=".jpg,.gif,.png" /></span>
            <input type="text" class="form-control" name="questions[${questionIndex}][answers][]" placeholder="Answer ${groupCount + 1}">
        </div>
    `;

    answerInputGroupWrapper.insertAdjacentHTML('beforeend', newAnswerInputGroup);
}

修复说明 #

• 统一了同一问题下所有单选框的name属性，确保属于同一分组，实现互斥选中功能。
• 为每个文件上传框生成唯一id，避免DOM操作时的冲突问题。
• 新增卡片ID参数，避免问题索引与卡片ID的数字混淆，提升代码健壮性。

内容的提问来源于stack exchange，提问作者jimi-del