How to check and uncheck group of checkboxes using javaScript?

Question

I have just started learning JavaScript, I am trying to solve my problem, I have those group of checkboxes, my aim is to check all checkboxes and log checkboxes data attribute values, which works in my code, but problem is, When I want to uncheck all of them an clear loged data, or just uncheck one of them and delete this data from checkedItems array, the data is added to the existing checkedItems array. thanks in advance

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>

Answer 1

You're going over the stream to fetch water. :) Just loop through them all to check them or uncheck them.

If you want to get the data, if you want to send a form, just do a querySelector. No need to store the variables, when you can reach them with '.checkboxes:not([id="checkAll"])', meaning that you exclude the #checkAll checkBox.

I also changed this:

<label for="vehicle1"> check all</label>

To this:

<label for="checkAll"> check all</label>

It's also better to add eventlisteners through javascript code than adding them as attributes on HTML elements.

let allCheckbox = document.getElementById('checkAll');

function checkAll(isChecked) {  
  var checkboxes = document.querySelectorAll('.checkboxes:not([id="checkAll"])');
  
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = isChecked;
  }
}

allCheckbox.addEventListener('change', (event) => {
  checkAll(event.currentTarget.checked);
});

label {
  cursor: pointer;
}

<input type="checkbox" id="checkAll">
<label for="checkAll"> check all</label><br>
<input type="checkbox" id="vehicle1" class="checkboxes" 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"  data-value="60">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" class="checkboxes" name="vehicle3" value="Boat" data-value="60">
<label for="vehicle3"> I have a boat</label><br>

Answer 2

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>

JsFiddle