Jul 1, 20211 min read views

Day10: Hold Shift and Check Checkboxes

Check multiple checkboxes while holding the Shift key

JavaScript30 tech

Project Introduction: Check multiple checkboxes while holding the Shift key.

Project Page: https://iris1114.github.io/javascript30/10_Hold-Shift-and-Check-Checkboxes/

Implementation

Get all checkbox elements
Use forEach to iterate, applying the handleCheck() function when elements are clicked

Code

const checkboxes = document.querySelectorAll(".inbox input[type='checkbox']")
 
let lastChecked
 
function handleCheck(e) {
  let inBetween = false // Flag for Shift key press
  if (e.shiftKey && this.checked) {
    // Check if Shift key is pressed and checkbox is checked
    checkboxes.forEach((checkbox) => {
      console.log(checkbox)
      // Record from first checked checkbox to last checked checkbox
      if (checkbox === this || checkbox === lastChecked) {
        inBetween = !inBetween // Now inBetween = true
        console.log('Starting to check them in between!')
      }
 
      if (inBetween) {
        checkbox.checked = true // Check boxes when inBetween = true
      }
    })
  }
 
  lastChecked = this
}
 
checkboxes.forEach((checkbox) => {
  checkbox.addEventListener('click', handleCheck)
})