JavaScript开发问卷时Radio Buttons跨问题组联动异常的解决求助

嘿，我一眼就发现问题所在啦——所有单选按钮都共用了同一个name属性值"colour"！在HTML里，相同name的单选按钮会被自动归为同一组，不管它们在页面的哪个位置，所以才会出现“整个问卷只能选一个单选按钮”的异常联动情况。

问题根源分析 #

看你的代码，radioStatic对象里的name被固定设为了"colour"：

const radioStatic = {
 name: "colour", // 所有单选按钮共用这个name！
 onchange: (event) => {
 // ... 其他逻辑
 },
 type: "radio"
};

之后创建的每一个单选按钮都会继承这个name，导致所有子问题的单选按钮都属于同一组，自然只能选一个。

修复方案 #

我们需要给每个子问题的单选按钮组生成唯一的name值，这样不同子问题的单选组就会相互独立。具体修改很简单：

修改步骤 #

1. 在newNumSubquestion函数里，根据传入的subquestionNumber参数，生成专属的name值，比如"colour-" + subquestionNumber
2. 把这个动态生成的name赋值给每个子问题的单选按钮

修改后的代码片段 #

重点修改newNumSubquestion函数里的radioStatic部分：

function newNumSubquestion(q, subquestionNumber) {
 q.insertAdjacentHTML('beforeend', `
 <li class="numSubquestion">
 <span class="numSubquestionName">Sub-question</span>
 <div id='colourRadioButtons'>
 </div>
`);
 var element = document.getElementById("colourRadioButtons");
 var newName = "colourRadioButtons" + subquestionNumber + "";
 element.id = newName;
 let lastRadio = false;
 const numbers = {
 "5": false,
 "4": false,
 "3": false,
 "2": false,
 "1": false,
 };
 // 这里修改：给当前子问题生成唯一的name
 const radioName = `colour-${subquestionNumber}`;
 const radioStatic = {
 name: radioName, // 用动态生成的name
 onchange: (event) => {
 if (lastRadio) {
 numbers[lastRadio] = false;
 }
 lastRadio = event.currentTarget.value;
 numbers[lastRadio] = event.currentTarget.checked;
 },
 type: "radio"
 };

 for (let key in numbers) {
 element.appendChild(
 Object.assign(document.createElement("label"), {
 textContent: key
 })).appendChild(
 Object.assign(document.createElement("input"), radioStatic, {
 checked: numbers[key],
 value: key
 }));
 if (numbers[key]) {
 lastRadio = key;
 }
 }
}

如果后续要支持多个主问题，还可以结合主问题的编号（比如numsQN）生成更唯一的name，比如colour-${numsQN}-${subquestionNumber}，确保所有单选组完全独立。

效果验证 #

修改后，每个子问题的单选按钮组都会有自己专属的name，比如第一个子问题的单选name是colour-0，第二个是colour-1，它们之间就不会再互相影响，每个问题都能独立选择1-5分的选项啦！

内容的提问来源于stack exchange，提问作者Chris Costa