根據數組元素生成復選框，然后根據選中的復選框填充另一個數組

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>