由数组 JavaScript 填充的单选按钮

Question

我希望能够有一个数组（如下图）：

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

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

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

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

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

Answer 1

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

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

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

/**
 * Randomize array element order in-place.
 * Using Durstenfeld shuffle algorithm.
 */
function shuffleArray(array) {
  for (var i = array.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
  return array;
}

// Shuffle the array.
myArray = shuffleArray(myArray);

// Iterate and create an input, label and line break.
for (var i = 0; i < myArray.length; i++) {
  // Create the radio element.
  var radioElement = document.createElement('input');
  radioElement.type = "radio";
  radioElement.name = "nationality";
  radioElement.value = myArray[i].toLowerCase();
  document.body.appendChild(radioElement);

  // Create the label.
  var radioLabel = document.createTextNode(myArray[i]);
  document.body.appendChild(radioLabel);

  document.body.appendChild(document.createElement('br'));
}

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>