如何在代码运行前修改Radio Buttons的name属性以解决运行后属性未更新、单选组异常问题

先来拆解下你的代码里的几个核心问题，这就是为什么name属性死活不生效的原因：

• name属性拼接的语法完全错了
  你写的name= "star"'+numberOfSubquestion+'会生成类似name= "star"1的无效HTML，浏览器只会识别name="star"，后面的数字直接被忽略了。正确的写法应该是把数字放进引号里，比如name="star'+numberOfSubquestion+'"，这样才能生成name="star1"、name="star2"这类合法的属性值。

• 误用innerHTML修改input元素
  input是自闭合标签，它根本没有innerHTML内容，你用document.getElementById("star-1").innerHTML=output1完全是做无用功——你是在往一个空元素里塞内容，而不是修改这个元素本身的属性。

• label的for属性没同步更新
  你的label是绑定到原有radio的id的，如果改了radio的id和name，label的for属性也要跟着改，不然点击label根本触发不了对应的单选按钮。

两种靠谱的解决方案 #

方案一：直接修改现有DOM元素的name属性 #

如果只是想修改已存在的单选按钮，直接操作DOM元素的name属性最直接，不需要重新生成元素：

// 获取所有star类的单选按钮
const starRadios = document.querySelectorAll('input.star[type="radio"]');
// 给每个单选按钮设置唯一的name
starRadios.forEach((radio, idx) => {
  // 用numberOfSubquestion做标识，生成唯一name
  radio.name = `star_${numberOfSubquestion}`;
  // 同步修改id，避免页面上出现重复id
  const newId = `star-${idx+1}_${numberOfSubquestion}`;
  radio.id = newId;
  // 找到对应的label，更新for属性
  const label = document.querySelector(`label[for="${radio.id.replace(`_${numberOfSubquestion}`, '')}"]`);
  if (label) label.setAttribute('for', newId);
});
numberOfSubquestion++;

方案二：正确动态生成完整的单选组 #

如果需要动态创建全新的单选按钮组，建议直接生成完整的HTML（包括label），然后替换容器的内容，这样更清晰：

// 假设你的单选组放在id为star-group-container的div里
const container = document.getElementById('star-group-container');
let groupHTML = '';

// 倒序生成5星评分的单选按钮和label
for (let starLevel = 5; starLevel >= 1; starLevel--) {
  const uniqueId = `star-${starLevel}_${numberOfSubquestion}`;
  groupHTML += `
    <input class="star star-${starLevel}" value="${starLevel}" id="${uniqueId}" type="radio" name="star_${numberOfSubquestion}" />
    <label class="star star-${starLevel}" for="${uniqueId}"></label>
  `;
}

// 替换容器内容，完成渲染
container.innerHTML = groupHTML;
numberOfSubquestion++;

这样生成的HTML完全符合规范，每个单选组的name都是唯一的，不会出现跨组互斥的问题，同时label也能正确绑定对应的单选按钮。

另外提个小细节：你原来的HTML里label加了readonly="readonly"，这个属性对label完全没用，建议删掉，避免不必要的语法警告。

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