Day 10: JavaScript Challenge
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!
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));