如何使用JavaScript为单选输入框动态添加可见文本？

嘿，我来帮你搞定这个问题！你提到单选按钮能正常显示、值也设置正确，但看不到选项文本，这大概率是你在动态生成单选元素时，没有把选项文本和单选按钮正确关联/插入到页面中——毕竟单选按钮本身只是个可点击的小圆圈，选项文本需要单独创建元素并和按钮绑定才行。

完整修复后的代码示例 #

先给你补全并修正后的完整代码，你可以直接参考：

<form id="answers"></form>

<script>
var quiz = { // Store questions
  questions: [
    { 
      question: "What month do we celebrate the birth of Jesus?",
      answers: ["March", "September","November", "December"], // 修正了拼写错误
      correctAnswer: "December"
    }
  ]
}

var view = {
  showAnswers: function() {
    const form = document.getElementById('answers');
    const currentQuestion = quiz.questions[0]; // 这里取第一个示例问题，你可以根据需求遍历所有问题
    
    currentQuestion.answers.forEach(answerText => {
      // 创建单选按钮元素
      const radioBtn = document.createElement('input');
      radioBtn.type = 'radio';
      radioBtn.name = 'quiz-answer'; // 同一组单选按钮name必须相同
      radioBtn.value = answerText;
      
      // 创建标签元素，用来包裹单选按钮和文本（点击文本也能选中按钮，体验更好）
      const label = document.createElement('label');
      label.appendChild(radioBtn);
      // 添加选项文本到标签里
      label.appendChild(document.createTextNode(` ${answerText}`));
      
      // 把标签添加到表单中
      form.appendChild(label);
      // 加个换行，让选项更清晰
      form.appendChild(document.createElement('br'));
    });
  }
}

// 调用方法生成选项
view.showAnswers();
</script>

关键修复点说明 #

• 用<label>关联按钮和文本：直接把单选按钮和文本放在<label>内部，既保证文本能显示，又能实现“点击文本选中按钮”的交互，这是最常用的做法。
• 正确插入文本节点：通过document.createTextNode()把选项文本添加到页面中，而不是只设置单选按钮的value（value是后台获取的值，不会直接显示在页面上）。
• 修正拼写错误：你原代码里的Novemeber和Decemeber是拼写错误，我改成了正确的November和December，避免后续判断正确答案时出现匹配问题。

如果你的view.showAns...原本有其他逻辑，只需要把上述“创建标签+插入文本”的部分整合进去就行～

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