This one is quite tricky! We have to implement functionality so that when a user holds shift and then clicks another checkbox a few rows down, all the checkboxes inbetween those should be checked.

I got a little stuck and this article was very helpful!

Repo here and demo is here.

JS code snippet below:

  // selects all input elements with type checkbox
  const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');
  // stores which element was checked
  let lastChecked;

  function handleCheck(e) {
    // Check if they had the shift key down
    // AND check that they are checking it
    let inBetween = false;
      // check if shift key was pressed and checkbox has been checked
      if (e.shiftKey && this.checked) {
        // loop through every single checkbox
        checkboxes.forEach(checkbox => {
          if (checkbox === this || checkbox === lastChecked) {
            inBetween = !inBetween;
            console.log('Checking them in between');
          }

          if (inBetween) {
            checkbox.checked = true;
          }
        });
      }
      
      lastChecked = this;
  }

  checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));