Question

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

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

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

var random = myArray[Math.floor(Math.random() * myArray.length)];

如果可能的话，我也想尝试在JavaScript和HTML中执行此操作，因为我还是编程新手。

如何在JavaScript中使用数组填充单选按钮？你怎么能从数组中随机选择要随机填充到单选按钮的选项？

Answer 1

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

它的工作原理是先对数组进行洗牌，然后迭代它并为数组中的每个元素创建一个无线电元素，标签文本和一个br标签。

＆＃13;

Code 
177
21F
585
63C
696
9EF
DA4
056

＆＃13;

Answer 2

首先，设置HTML：

<div id="wrapper"></div>

然后是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 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); }

Answer 3

可能这就是你所需要的：

var nacionalities = ['Asian', 'Thai', 'Korean', 'Chinese', 'Mexican'];
var random;
var elements = [];
var content = document.getElementById('content');
var generateBtn = document.getElementById('generate');
generateBtn.addEventListener('click', generateRadioElements)

function generateRadioElements() {
  content.innerHTML = '';
  nacionalities.forEach(function(nacionality) {
    elements.push(createRadioElement(nacionality));
  });

  // Append the labels and input in a random order to the content
  while (elements.length !== 0) {
    random = Math.floor(Math.random() * elements.length);
    var element = elements.splice(random, 1)[0];

    content.appendChild(element.label);
    content.appendChild(element.input);
    if (elements.length > 0) content.appendChild(createSeparator());
  }
}

function createRadioElement(value) {
  var radioLabel = document.createElement('label');
  radioLabel.innerHTML = value;
  var radioInput = document.createElement('input');
  radioInput.setAttribute('type', 'radio');
  radioInput.setAttribute('name', 'nacionalities');
  radioInput.setAttribute('value', value);
  return {
    label: radioLabel,
    input: radioInput
  };
}

function createSeparator() {
  var spanSeparator = document.createElement('span');
  spanSeparator.style.padding = "0px 10px 0px 10px";
  return spanSeparator;
}

<div id="generate">Click to generate</div>
<div id="content"></div>

单选按钮由数组JavaScript填充

3 个答案: