script.js 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. const selectAllCheckboxes = document.querySelector('#select-all');
  2. const checkboxes = document.querySelectorAll('.checkbox');
  3. const deleteBtn = document.querySelector('#delete');
  4. selectAllCheckboxes.addEventListener('click', eventCheckBox);
  5. /**
  6. * @description Event handler for select all checkbox
  7. */
  8. function eventCheckBox () {
  9. if (selectAllCheckboxes.checked) {
  10. checkboxes.forEach(checkbox => {
  11. checkbox.checked = true;
  12. });
  13. } else {
  14. checkboxes.forEach(checkbox => {
  15. checkbox.checked = false;
  16. });
  17. }
  18. }
  19. /**
  20. * @description Event handler for checkbox to enable/disable delete button
  21. */
  22. function handleCheckboxChange() {
  23. let atLeastOneChecked = false;
  24. checkboxes.forEach(function(checkbox) {
  25. if (checkbox.checked) {
  26. atLeastOneChecked = true;
  27. }
  28. });
  29. deleteBtn.disabled = !atLeastOneChecked;
  30. }
  31. checkboxes.forEach((checkbox)=> {
  32. checkbox.addEventListener("change", handleCheckboxChange);
  33. });
  34. selectAllCheckboxes.addEventListener('click', handleCheckboxChange);