< Back to JavaScript 30

Hold Shift and Check Checkboxes

• Project Synopsis and Code

  In this lesson I add functionality that allows the user to hold 'shift' and 'click' to select multiple list items at once.

  First I grab all of the checkboxes on the page (document.querySelectorAll('.inbox input[type="checkbox"]')). I also initialise a 'lastchecked' variable.

  For each checkbox I listen for a 'click' and run handleCheck(e).

  In handleCheck(e) - Initialise an 'inBetween' variable as false. Then check if the user is holding the shift key and that they are checking the input (e.shiftKey && this.checked). If that is the case, then for each checkbox, check if the checkbox is either the current input, or the 'lastChecked' item. If either are true, flip 'inBetween' polarity (inBetween = !inBetween). Check if 'inBetween' is true, and if so, check that checkbox.

  Finally set 'lastChecked' to the current checkbox 'this'.

  See the Pen JavaScript30 - 10 - Hold Shift And Check Checkboxes by Corey Noble (@CoreyNoble) on CodePen.