如何使用javascript将复选框项推入数组

chy5wohz 于 2021-09-13 发布在 Java

关注(0)|答案(2)|浏览(413)

我有一个清单，当项目被检查时，我将其推入一个输入字段。取消选中该项时，该项将从输入字段中删除。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;
  }
}

Arrays JavaScript Html CheckBox

来源：https://stackoverflow.com/questions/68338814/how-to-push-checkbox-item-into-array-using-javascript

2条答案

按热度按时间

iq0todco1#

您可以只在所有相关复选框上侦听更改事件，然后在 :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>

赞(0）回复(0）举报 2021-09-13

inkz8wg92#

首先，分配一个 value 用于所有复选框。使用以下命令选择一组复选框，而不是选择单个图元 class 加 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>

赞(0）回复(0）举报 2021-09-13

我来回答

如何使用javascript将复选框项推入数组

2条答案

相关问题

热门标签

最新问答