javascript - 根据数组元素生成复选框，然后根据选中的复选框填充另一个数组

Question

假设我们有一个空数组，我们希望根据选中的复选框填充它:

let selected = [];

还有一些人名的数组:

let names = ['Joe', 'Mike', 'Sara', 'Jack'];

我想首先为每个 name's 元素生成复选框，然后我想将每个选中的元素添加到 selected 数组。

我可以用下拉菜单(下面的代码)来做到这一点，但我不知道如何用复选框来做到这一点:

let dropDown = document.getElementById('names');
let selected = [];
let names = ['Joe', 'Mike', 'Sara', 'Jack'];

// Loop through each of the voices.
names.forEach(function(e, i) {
  // Create a new option element.
  var option = document.createElement('option');

  // Set the options value and text.
  option.value = names[i];
  option.innerHTML = names[i];

  // Add the option to the voice selector.
  dropDown.appendChild(option);
});

// 3 seconds to select the item
setTimeout(function() {

  if (dropDown.value) {
    selected.push(dropDown.value)
  }

  console.log(selected)

}, 3000)

<div class="option">

  <label for="voice">US Pronunciation:</label>
  <select name="voice" id="names"></select>

</div>

Answer 1

您必须为复选框添加一个 onClick 事件处理程序，并以这种方式将它们添加到选择中。像这样的事情应该让您开始:

let dropDown = document.getElementById('names');
let container = document.getElementById('container');
let selected = [];
let names = ['Joe', 'Mike', 'Sara', 'Jack'];

// Loop through each of the voices.
names.forEach(function(e, i) {
  let html = `
    <input onClick="handleCheck('container', 'names')" type="checkbox" name="checkbox" id="${i}_${e}" value="${e}">
    <label for="${i}_${e}">${e}</label>
  `;
  container.innerHTML += html;
});

function handleCheck(containerElementId, inputElementId) {
  let containerElement = document.getElementById(containerElementId);
  let select = document.getElementById(inputElementId);
  select.innerHTML = "";
  selected = [];
  containerElement.querySelectorAll('input[type="checkbox"]').forEach(el => {
    if(el.checked) {
      select.innerHTML += `<option value="${el.value}">${el.value}</option>`;
      selected.push(el.value);
    }
  })
  console.log("selected", selected);
}

<div class="option" id="container">

  <label for="voice">US Pronunciation:</label>
  <select name="voice" id="names"></select>

</div>