div,
hr {
  align-items: center;
  display: flex;
  margin-bottom: 1rem;
}

input {
  margin-right: 0.5rem;
  transform: scale(1.5);
}

const form = document.querySelector("#form");
const allCarsSelectedState = document.querySelector("#allCarsSelectedState");

const toggleSelectAllCars = (target) => {
  const selectAll = target.checked;
  const checkboxes = Array.from(target.form.elements);
  
  checkboxes.forEach((checkbox) => {
    checkbox.checked = selectAll;
  });
  
  allCarsSelectedState.checked = !allCarsSelectedState.checked;
  allCarsSelectedState.indeterminate = false;
  target.checked = !target.checked;
};

const handleSelectedOption = (event) => {
  const target = event.target;

  if (target.nodeName.toLowerCase() !== "input") {
    return;
  }
  
  if (target.id === 'allCarsSelectedState') {
    toggleSelectAllCars(target);
    
    return;
  }
  
  const allCheckboxesLength = form.elements.length - 1;

  const areAllCheckboxesSelected = Array.from(target.form.elements)
   .filter((checkbox) => {
     return checkbox.id !== 'allCarsSelectedState';
   })
   .filter(
    (checkbox) => {
      return checkbox.checked;
    }
  );

  allCarsSelectedState.indeterminate = false;

  if (areAllCheckboxesSelected.length === allCheckboxesLength) {
    allCarsSelectedState.checked = true;
  } else if (areAllCheckboxesSelected.length === 0) {
    allCarsSelectedState.checked = false;
  } else {
    allCarsSelectedState.checked = false;
    allCarsSelectedState.indeterminate = true;
  }
};

form.addEventListener("change", handleSelectedOption);