使用JavaScript动态创建的radio单选按钮无法点击如何解决

两个代码层面的问题直接导致交互失效：

• 你贴出的拼接代码只存在</form>闭合标签，缺失对应的<form>起始标签，所有input元素处于无合法表单容器的异常DOM结构中，部分浏览器会将这类解析异常的表单控件判定为不可交互状态
• 若这段JS逻辑是在页面DOM加载完成后执行（比如放在按钮点击回调、DOMContentLoaded/load事件监听中），document.write()会自动调用document.open()清空整个页面的现有DOM再重写内容，新生成的DOM树结构残缺，直接导致表单控件无法正常点击。

直接废弃字符串拼接+document.write的过时写法，用标准DOM API创建节点插入页面，从根源避免标签不匹配、文档重写的问题：

// 创建表单容器
const quizForm = document.createElement('form');

// 定义题目选项
const optionList = [
  { val: 'option1', text: 'firstOption' },
  { val: 'option2', text: 'secondOption' },
  { val: 'option3', text: 'thirdOption' },
  { val: 'option4', text: 'fourthOption' }
];

optionList.forEach((item, idx) => {
  // 生成单选按钮
  const radioInput = document.createElement('input');
  radioInput.type = 'radio';
  radioInput.id = item.val;
  radioInput.name = 'question_option'; // 同组单选name必须保持一致，原有逻辑此处正确
  radioInput.value = item.val;
  radioInput.style.alignContent = 'center';

  // 生成关联的选项文本，点击文字即可选中，提升交互可用性
  const optionLabel = document.createElement('label');
  optionLabel.htmlFor = item.val;
  optionLabel.textContent = item.text;

  quizForm.appendChild(radioInput);
  quizForm.appendChild(optionLabel);

  // 第二个选项后插入换行
  if (idx === 1) quizForm.appendChild(document.createElement('br'));
})

// 将生成的表单插入页面
document.body.appendChild(quizForm);

• 禁止在页面加载完成后调用document.write()，该写法属于已被淘汰的DOM操作方式，除了会意外清空全页内容，还会引发各类DOM解析异常、事件绑定失效问题
• 同组单选按钮必须保证name属性值完全一致，否则无法实现单选互斥效果
• 单选按钮建议与<label>标签绑定，不要直接把选项文本裸放在input后面，否则只有点击小圆点才能触发选中，很容易被误判为控件失效

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