How to uncheck all checkboxes with a single click?

I made this in JavaScript for selecting checkboxes using the <kbd>SHIFT</kbd> key. Now I want to deselect it by a single click.

HTML:

<div class="inbox">
      <div class="item">
        <input type="checkbox" />
        <p>This is an inbox layout.</p>
      </div>
      <div class="item">
        <input type="checkbox" />
        <p>Check one item</p>
      </div>
      <div class="item">
        <input type="checkbox" />
        <p>Hold down your Shift key</p>
      </div>
      <div class="item">
        <input type="checkbox" />
        <p>Check a lower item</p>
      </div>
      <div class="item">
        <input type="checkbox" />
        <p>Everything in between should also be set to checked</p>
      </div>
      <div class="item">
        <input type="checkbox" />
        <p>Try do it without any libraries</p>
      </div>
    </div>

JavaScript to select the checkbox:

 const checkboxes = document.querySelectorAll(
        '.inbox input[type="checkbox"]'
      );

      let lastChecked;

      function handleCheck(e) {
        //for selecting the checkboxes
        let inBetween = false;
        // Check if they had the shift key down
        // AND check that they are checking it

        if (e.shiftKey && this.checked) {
          // go ahead and do what we please
          // loop over every single checkbox
          checkboxes.forEach(checkbox => {
            console.log(checkbox);
            if (checkbox === this || checkbox === lastChecked) {
              inBetween = !inBetween;
              console.log('Starting to check them in between!');
            }

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

        lastChecked = this;
      }

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

I want after selecting with <kbd>SHIFT</kbd> key, when I click on a selected checkbox the selected checkboxes which comes after that to be unchecked with a single click.

You could simplify your logic by putting your checkboxes into an array and getting the range of checkboxes to check:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// collect all the checkboxes into an array for easier handling

const checkboxes = [...document.querySelectorAll('.inbox input[type="checkbox"]')];

let lastChecked;

function handleCheck(e) {
  
  if (e.shiftKey) {

    // we should set all checkboxes in the range with this value (including the last checked)
    const checked = lastChecked?.checked;

    // get the range of checkboxes to check between lastChecked and this (including both)
    const range = [lastChecked, this].map(check => checkboxes.indexOf(check)).sort((a, b) => a - b);

    // get checkboxes in the range and check them
    checkboxes.slice(range[0], range[1] + 1).forEach(check => check.checked = checked);

  }
   

  lastChecked = this;
}

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

<!-- language: lang-css -->

p{
display:inline-block;
margin:0;
}

<!-- language: lang-html -->

<div class="inbox">
      <div class="item">
        <input type="checkbox" />
        <p>This is an inbox layout.</p>
      </div>
      <div class="item">
        <input type="checkbox" />
        <p>Check one item</p>
      </div>
      <div class="item">
        <input type="checkbox" />
        <p>Hold down your Shift key</p>
      </div>
      <div class="item">
        <input type="checkbox" />
        <p>Check a lower item</p>
      </div>
      <div class="item">
        <input type="checkbox" />
        <p>Everything in between should also be set to checked</p>
      </div>
      <div class="item">
        <input type="checkbox" />
        <p>Try do it without any libraries</p>
      </div>
    </div>

<!-- end snippet -->

You can add this to your handleCheck :

else if (e.shiftKey && !this.checked) {
  // If shift key is down and checkbox is being unchecked
  // loop over every single checkbox and deselect the ones in between
  checkboxes.forEach(checkbox => {
    if (checkbox === this || checkbox === lastChecked) {
      inBetween = !inBetween;
    }

    if (inBetween) {
      checkbox.checked = false;
    }
  });
}

it seems you do not check the document is ready.

I just wrapped your code into a DOMContentLoaded Eventlistener and it works.

document.addEventListener("DOMContentLoaded", () => {
const checkboxes = document.querySelectorAll(
    '.inbox input[type="checkbox"]'
  );

  let lastChecked;

  function handleCheck(e) {
    //for selecting the checkboxes
    let inBetween = false;
    // Check if they had the shift key down
    // AND check that they are checking it
    
    if (e.shiftKey && this.checked) {
      // go ahead and do what we please
      // loop over every single checkbox
      checkboxes.forEach(checkbox => {
        console.log(checkbox);
        if (checkbox === this || checkbox === lastChecked) {
          inBetween = !inBetween;
          console.log('Starting to check them in between!');
        }

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

    lastChecked = this;
  }

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

As you cann see there isn't more to add.
Hope this will help.

With a couple changes to your code, this should accomplish unchecking as well as checking. It will stop at the lastChecked (or unchecked) as in your original example, I assumed that's the behavior you wanted.

const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');

let lastChecked;

function handleCheck(e) {
    //for selecting the checkboxes
    let inBetween = false;
    // Check if they had the shift key down
    // AND check that they are checking it

    if (e.shiftKey/* && this.checked */) { // ignore current checked state
        // go ahead and do what we please
        // loop over every single checkbox
        checkboxes.forEach((checkbox) => {
            console.log(checkbox);
            if (checkbox === this || checkbox === lastChecked) {
                inBetween = !inBetween;
                console.log("Starting to check them in between!");
            }

            if (inBetween) {
                checkbox.checked = this.checked; // handles both checked/unchecked
            }
        });
    }

    lastChecked = this;
}

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