so I've watched this YT video
https://www.youtube.com/watch?v=RIPYsKx1iiU&list=PLu8EoSxDXHP6CGK4YVJhL_VWetA865GOH&index=10
I don't understand the logic he set up in that function which makes the checkboxes between the current checked checkbox and the last checked checkbox to tick aswell?
I mean the first if statement checks if the shift key was pressed and the checkbox was checked. When that is true, we loop through the checkbox input array (well not an array, but don't mind for a second) and if the iterated element is equal to the element that was clicked (this) OR is equal to the lastChecked value, then inBetween variable gets turned to true and then the next if statement makes the checkbox checked. Sooo, the checkboxes that aren't either of those don't make the inBetween variable to true. Then how does this work then?
This is the code
const checkboxes = document.querySelectorAll('.box input[type="checkbox"]');
let lastChecked;
function handleClick(e) {
let inBetween = false;
if(e.shiftKey && this.checked) {
checkboxes.forEach(checkbox => {
if(checkbox === this || checkbox === lastChecked) {
inBetween = !inBetween;
console.log(checkbox, inBetween);
}
if(inBetween) {
checkbox.checked = true;
}
});
}
lastChecked = this;
}
checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleClick))
Aucun commentaire:
Enregistrer un commentaire