javascript - 如何使用javascript检查和取消选中复选框组？

Question

我刚刚开始学习 JavaScript，我正在尝试解决我的问题，我有这些复选框，我的目标是检查所有复选框并记录复选框数据属性值，这在我的代码中有效，但问题是，当我想要取消选中所有这些清除记录的数据，或者仅取消选中其中一个并从checkedItems数组中删除此数据，数据将添加到现有checkedItems数组中。提前致谢

var checkedItems = [];

function check() {
  var checkboxes = document.querySelectorAll('.checkboxes');
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = false;
    if (checkboxes[i].type == "checkbox") {
      if (!checkboxes[i].checked) {
        checkboxes[i].checked = true;
        checkedItems.push(checkboxes[i].getAttribute('data-value'));
      } else {
        checkboxes[i].checked = false;
        checkedItems = [];
      }
    }
  }

  console.log(checkedItems)
}



function checkSingle(e) {
  checkedItems.push(e.target.getAttribute('data-value'))
  console.log(checkedItems)
}

<input type="checkbox" id="checkAll" onchange="check()">
<label for="vehicle1"> check all</label><br>
<input type="checkbox" id="vehicle1" class="checkboxes" onchange="checkSingle(event)" name="vehicle1" value="Bike" data-value="50">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" class="checkboxes" value="Car" onchange="checkSingle(event)" data-value="60">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" class="checkboxes" name="vehicle3" onchange="checkSingle(event)" value="Boat" data-value="60">
<label for="vehicle3"> I have a boat</label><br>

标签： javascripthtml

Answer 1

var checkedItems = [];

function check(e) {
    var checkAll = e.target.checked;
    var checkboxes = document.querySelectorAll('.checkboxes');
    for (var i = 0; i < checkboxes.length; i++) {
        //checkboxes[i].checked = false;
        if (checkboxes[i].type == "checkbox") {
            if (!checkboxes[i].checked && checkAll) {
                checkboxes[i].checked = true;
                checkedItems.push(checkboxes[i].getAttribute('data-value'));
            } else if(!checkAll) {
                checkboxes[i].checked = false;
                checkedItems = [];
            }
        }
  }
  console.log(checkedItems)
}

function checkSingle(e) {
    var value =  e.target.getAttribute('data-value');
    if(e.target.checked==false){
        checkedItems.splice(checkedItems.indexOf(value),1);
    } else{
        checkedItems.push(value)
    }
    console.log(checkedItems)
}

<input type="checkbox" id="checkAll" onchange="check(event)">
<label for="vehicle1"> check all</label><br>
<input type="checkbox" id="vehicle1" class="checkboxes" onchange="checkSingle(event)" name="vehicle1" value="Bike" data-value="50">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" class="checkboxes" value="Car" onchange="checkSingle(event)" data-value="60">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" class="checkboxes" name="vehicle3" onchange="checkSingle(event)" value="Boat" data-value="60">
<label for="vehicle3"> I have a boat</label><br>

提琴手