如何使用JS在HTML中为radio单选按钮动态设置显示文本值

核心错误原因 #

<input type="radio"> 是自闭合标签，本身不存储页面展示文本：

• innerHTML、innerText 只能作用于可以包裹内容的闭合标签，对自闭合的input标签无效
• value 属性修改的是表单提交时传给后端的字段值，不会渲染到页面上展示

解决方案 #

方案1：新增文本容器（推荐，后续修改更灵活） #

先修改HTML，在radio后面加一个专门放展示文本的span标签：

<form id="formulier">
  <label for="a">
    <input type="radio" id="a" name="a">
    <span id="a-text"></span>
  </label>
</form>

再修改JS代码，修改span的文本内容：

var answer = <?php echo json_encode($antwoorden); ?>;
// 设置展示文本
document.getElementById("a-text").innerText = answer[0];
// 如需同步设置radio的提交值，可补充这行
document.getElementById("a").value = answer[0];

方案2：不用修改原有HTML结构 #

直接在radio标签后面插入文本节点即可：

var answer = <?php echo json_encode($antwoorden); ?>;
const aRadio = document.getElementById("a");
// 在radio元素的末尾位置插入展示文本
aRadio.insertAdjacentText('afterend', answer[0]);
// 如需同步设置radio的提交值，可补充这行
aRadio.value = answer[0];

额外说明 #

你之前尝试的document.write(answer[0])不生效，大概率是因为脚本执行时answer变量还没完成赋值，而且document.write会在页面加载完成后执行时覆盖整个页面内容，不建议使用。

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