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

Question

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

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

如何在我的代码中传递 Arguments 以便我不必重复编写太多代码？

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;
  }
}

Answer 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>

Answer 2

首先，为所有复选框分配一个value 。 不是选择单个元素，而是使用class选择一组复选框并添加event listener. Then you can event listener. Then you can根据复选框的状态推送or删除复选框的值。

 let arrayList = []; function handleCheckbox(e) { if (e.target.checked) { arrayList.push(e.target.value); } else { arrayList = arrayList.filter(value => value !== e.target.value) } document.getElementById("inputField").value = arrayList.join(','); } document.querySelectorAll('.listed-item').forEach(element => element.addEventListener('change', handleCheckbox));

 <div class="container"> <div class="row justify-content-center"> <div class="col-md-6"> <h4 class="title">Push Checkbox Item into Array</h4> <div class="item-list"> <div class="form-check"> <input class="form-check-input listed-item" type="checkbox" value="Item One" id="itemOne" name="Item One"> <label class="form-check-label" for="itemOne"> Item One </label> </div> </div> <div class="item-list"> <div class="form-check"> <input class="form-check-input listed-item" type="checkbox" value="Item Two" id="itemTwo" name="Item Two"> <label class="form-check-label" for="itemTwo"> Item Two </label> </div> </div> <div class="item-list"> <div class="form-check"> <input class="form-check-input listed-item" type="checkbox" value="Item Three" id="itemThree" name="Item Three"> <label class="form-check-label" for="itemThree"> Item Three </label> </div> </div> <div class="item-list"> <div class="form-check"> <input class="form-check-input listed-item" type="checkbox" value="Item Four" id="itemFour" name="Item Four"> <label class="form-check-label" for="itemFour"> Item Four </label> </div> </div> <h5 class="mt-3">Items are being pushed in this field</h5> <input type="text" class="inputField" id="inputField"> </div> </div> </div>