Question

我几乎有这个工作，但有一点我无法弄明白：我正在尝试做的是动态创建一个单选按钮列表。但是，当我这样做时，它每次都会创建一个收音机盒，以便我可以选择所有答案。如何创建一个输入，有4个选项，以便我只能选择一个而不是全部？

function questionAnswers() {
  let arr = Object.values(questionList[i].answers)
  for (var a in arr){
    let checkbox = document.createElement('input')
    let label = document.createElement('label')
    label.appendChild(document.createTextNode(arr[a]))
    checkbox.type = 'radio';
    answerSection.appendChild(checkbox);
    answerSection.appendChild(label)
  }
}

Answer 1

为两个或多个无线电组分配相同的名称：

function questionAnswers() {
  let arr = ["shark","tiger","lion"];
  let answerSection=document.body;
  for (var a in arr){
    let checkbox = document.createElement('input')
    let label = document.createElement('label')
    label.appendChild(document.createTextNode(arr[a]))
    checkbox.type = 'radio';
    checkbox.name="animal";
    answerSection.appendChild(checkbox);
    answerSection.appendChild(label)
  }
}

window.onload=questionAnswers;

如果您有多个无线电，您可以指定随机名称，例如：

var randname=""+Math.floor(Math.random()*10000);

Answer 2

为所有单选按钮指定相同名称。

function questionAnswers() {
  let arr = Object.values(questionList[i].answers)
  for (var a in arr){
    let checkbox = document.createElement('input')
    let label = document.createElement('label')
    label.appendChild(document.createTextNode(arr[a]))
    checkbox.type = 'radio';
    checkbox.name = "myradio";
    answerSection.appendChild(checkbox);
    answerSection.appendChild(label)
  }
}

即时创建单选按钮列表

2 个答案: