由数组JavaScript填充的单选按钮

我希望能够拥有一个数组（如下面的一个）：

这将获取这些值（无论数组中有多少个值）并填充单选按钮。我还希望能够从数组列表中随机填充单选按钮。 例如：

如果可能的话，我还想尝试只使用JavaScript和HTML，因为我还是编程新手

---

如何在JavaScript中用数组填充单选按钮？您如何从数组中随机选择选项以随机填充到单选按钮中？

此代码将为数组的每个元素创建一个单选按钮，但顺序是随机的

它的工作原理是首先洗牌数组，然后遍历数组，并为数组中的每个元素创建一个单选元素、标签文本和br标记

var myArray=[“亚洲”、“泰国”、“韩国”、“中国”、“墨西哥”]；
/**
*随机化数组元素顺序。
*使用Durstenfeld洗牌算法。
*/
函数shuffleArray（数组）{
对于（var i=array.length-1；i>0；i--）{
var j=Math.floor（Math.random（）*（i+1））；
var-temp=数组[i]；
数组[i]=数组[j]；
数组[j]=温度；
}
返回数组；
}
//洗牌数组。
myArray=Shuffarray（myArray）；
//迭代并创建输入、标签和换行符。
对于（var i=0；i}

首先，设置HTML：

然后JavaScript：

var myArray = ["Asian", "Thai", "Korean", "Chinese", "Mexican"];

var wrapper = document.getElementById('wrapper');

var elementsToInsert = [];

// Creation of the input with radio type and the labels
for(var i = 0; i < myArray.length; i++) {
  var radio = document.createElement('input');
  var label = document.createElement('label');
  radio.type = 'radio';
  radio.name = myArray[i];
  radio.value = myArray[i];

  label.setAttribute("for", myArray[i]);
  label.innerHTML = myArray[i];

  elementsToInsert.push({ label: label, radio: radio });
}

// Insert the labels and input in a random order
while(elementsToInsert.length !== 0) {
  var randomIndex = Math.floor(Math.random() * elementsToInsert.length);

  // Array.prototype.splice removes items from the Array and return the an array containing the removed items (See https://www.w3schools.com/jsref/jsref_splice.asp)
  var toInsert = elementsToInsert.splice(randomIndex, 1)[0];

  wrapper.appendChild(toInsert.label);
  wrapper.appendChild(toInsert.radio);
}

---

也许这就是你需要的：

var-nationalities=[‘亚洲’、‘泰国’、‘韩国’、‘中国’、‘墨西哥’]；
var随机；
var元素=[]；
var content=document.getElementById（'content'）；
var generateBtn=document.getElementById（'generate'）；
generateBtn.addEventListener（'click'，generateRadioElements）
函数生成器adioelements（）{
content.innerHTML=''；
民族性。forEach（功能（民族性）{
元素。推（createRadioElement（民族性））；
});
//将标签和输入以随机顺序附加到内容
while（elements.length！==0）{
random=Math.floor（Math.random（）*elements.length）；
var元素=元素。拼接（随机，1）[0]；
content.appendChild（元素.标签）；
content.appendChild（element.input）；
如果（elements.length>0）content.appendChild（createSeparator（））；
}
}
函数createRadioElement（值）{
var radioLabel=document.createElement（'label'）；
radioLabel.innerHTML=值；
var radioInput=document.createElement（'input'）；
radioInput.setAttribute（'type'，'radio'）；
radioInput.setAttribute（'name'，'nacialities'）；
radioInput.setAttribute（'value'，value）；
返回{
标签：放射性标签，
输入：放射性输入
};
}
函数createSeparator（）{
var spanSeparator=document.createElement（'span'）；
spanSeparator.style.padding=“0px 10px 0px 10px”；
回流分离器；
}

单击以生成

太棒了，祝你好运，但问题在哪里呢？详细说明：如果你有一个具体的问题，那就是要走的路。如果您需要一般帮助/教程，请搜索谷歌。这不是一个教程网站。我建议您使用array.splice（），使用数组长度作为随机的上限，并在长度为0时终止循环。是否有办法在循环中设置断点，使其位于垂直列表而不是水平列表中？当然，您需要添加

wrapper.appendChild（document.createElement（'br'）；
wrapper.appendChild（radio）之后的
；
谢谢！还有一种方法可以一次只检查一个单选按钮吗？我知道如何在html中列出单选按钮，但不知道如何在不在htmlSure中时执行，如果它们具有相同的名称，则一次只检查一个单选按钮。这意味着您需要将
radio.name=value；
更改为
radio.name='country'；
或任何其他名称。因此，在您上面发布的代码中，如果i't radio.name=myArray[i]，有没有办法一次只勾选一个单选按钮？还是使用单个while循环更好？因为我还是编程新手，所以请确保我对代码理解得足够好
var random = myArray[Math.floor(Math.random() * myArray.length)];

var myArray = ["Asian", "Thai", "Korean", "Chinese", "Mexican"];

var wrapper = document.getElementById('wrapper');

var elementsToInsert = [];

// Creation of the input with radio type and the labels
for(var i = 0; i < myArray.length; i++) {
  var radio = document.createElement('input');
  var label = document.createElement('label');
  radio.type = 'radio';
  radio.name = myArray[i];
  radio.value = myArray[i];

  label.setAttribute("for", myArray[i]);
  label.innerHTML = myArray[i];

  elementsToInsert.push({ label: label, radio: radio });
}

// Insert the labels and input in a random order
while(elementsToInsert.length !== 0) {
  var randomIndex = Math.floor(Math.random() * elementsToInsert.length);

  // Array.prototype.splice removes items from the Array and return the an array containing the removed items (See https://www.w3schools.com/jsref/jsref_splice.asp)
  var toInsert = elementsToInsert.splice(randomIndex, 1)[0];

  wrapper.appendChild(toInsert.label);
  wrapper.appendChild(toInsert.radio);
}

var myArray = ["Asian", "Thai", "Korean", "Chinese", "Mexican"];

var wrapper = document.getElementById('wrapper');

var elementsToInsert = [];

while(myArray.length) {
  var randomIndex = Math.floor(Math.random() * myArray.length);

  var value = myArray.splice(randomIndex, 1)[0];
  var radio = document.createElement('input');
  var label = document.createElement('label');

  radio.type = 'radio';
  radio.name = value;
  radio.value = value;

  label.setAttribute("for", value);
  label.innerHTML = value;

  wrapper.appendChild(label);
  wrapper.appendChild(radio);
}