如何使用 Javascript 将复选框项推送到数组中答案

【问题标题】：How to Push Checkbox Item into Array using Javascript如何使用 Javascript 将复选框项推送到数组中
【发布时间】：2021-09-21 02:45:59
【问题描述】：

我有一个清单，我在检查项目时将其推入输入字段。取消选中该项目时，该项目将从“输入”字段中删除。 https://codepen.io/dragoncoderpanda/pen/abWmPgx

但是，存在重复代码。对于每个复选框，我必须创建一个单独的函数来推送/弹出文本。

如何在我的代码中传递参数，这样我就不必重复编写太多代码？

itemArray = [];
let inputField = document.querySelector('.inputField')
let itemOne = document.querySelector('#itemOne')

itemOne.addEventListener('click', alpha);

function alpha(){
  if(itemOne.checked == true){
    itemArray.push(itemOne.name);
    inputField.placeholder = itemArray;
    inputField.value = itemArray;
  } else{
    itemArray.pop(itemOne.name);
    inputField.placeholder = itemArray;
    inputField.value = itemArray;
  }
}

let itemTwo = document.querySelector('#itemTwo')
itemTwo.addEventListener('click', beta);
function beta(){
  if(itemTwo.checked == true){
    itemArray.push(itemTwo.name);
    inputField.placeholder = itemArray;
    inputField.value = itemArray;
  } else{
    itemArray.pop(itemTwo.name);
    inputField.placeholder = itemArray;
    inputField.value = itemArray;
  }
}

【问题讨论】：

标签： javascript html arrays checkbox

【解决方案1】：

您可以只监听所有相关复选框上的更改事件，然后循环遍历 :checked 以每次构建您的 itemArray。

itemArray = [];
let inputField = document.querySelector('.inputField')
let chks = document.querySelectorAll('.checkboxes input[type=checkbox]')

chks.forEach(el => el.addEventListener('change', e => {
  itemArray = [];
  document.querySelectorAll('.checkboxes input[type=checkbox]:checked').forEach(chk => itemArray.push(chk.getAttribute('name')))
  inputField.value = itemArray.join(", ")
}))

<input class='inputField' />
<div class='checkboxes'>
  <label><input type='checkbox' name='chk1' value='1' /> Chk 1 </label>
  <label><input type='checkbox' name='chk2' value='2' /> Chk 2 </label>
  <label><input type='checkbox' name='chk3' value='3' /> Chk 3 </label>
  <label><input type='checkbox' name='chk4' value='4' /> Chk 4 </label>
  <label><input type='checkbox' name='chk5' value='5' /> Chk 5 </label>
</div>

【讨论】：