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

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>

Answer 2

您可以为数组的每个元素创建一个包含input和label的div元素。 这些元素中的每一个都需要附加到现有的父元素option 。 您可以通过写下反引号内的实际 HTML 来实现这一点。 然后使用document.createElement创建一个空元素。 使用innerHTML属性，您可以用您编写的HTML 填充此元素。 最后像使用appendChild一样附加它：

  const html = `
    <div>
      <input type="checkbox" id="${name}" name="${name}">
      <label for="${name}">${name}</label>
    </div>
  `.trim();

  const wrapper = document.createElement('div');
  wrapper.innerHTML = html;

  const element = option.appendChild(wrapper.firstChild);

我不会使用forEach循环遍历数组，而是使用map ，它允许我们随时随地创建input元素数组。 它与使用forEach完全相同……唯一的区别是您需要在回调函数中返回一个元素：

const checkboxes = names.map(function(name) {

  const html = `
    <div>
      <input type="checkbox" id="${name}" name="${name}">
      <label for="${name}">${name}</label>
    </div>
  `.trim();

  const wrapper = document.createElement('div');
  wrapper.innerHTML = html;

  const element = option.appendChild(wrapper.firstChild);

  return element.querySelector('input');

});

所以现在我们有一个名为checkboxes的数组，它包含四个input元素，对应于包含在初始names数组中的四个名称。

每当您需要知道选中的复选框时，您可以将它们过滤掉并获取其余复选框的名称。 我们将使用filter和另一个map来做到这一点：

checkboxes.filter(checkbox => checkbox.checked)
          .map(checkbox => checkbox.name);

---

这是完整的代码：

 const option = document.querySelector('.option'); const names = ['Joe', 'Mike', 'Sara', 'Jack']; const checkboxes = names.map(function(name) { const html = ` <div> <input type="checkbox" id="${name}" name="${name}"> <label for="${name}">${name}</label> </div> `.trim(); const wrapper = document.createElement('div'); wrapper.innerHTML = html; const element = option.appendChild(wrapper.firstChild); return element.querySelector('input'); }); setTimeout(function() { const selected = checkboxes.filter(checkbox => checkbox.checked); console.log(selected.map(checkbox => checkbox.name)); }, 3000)

 <div class="option"> </div>