这是我在github 上发现的一个原生js挑战项目,由于是js小白,希望通过这次的项目加深对js的理解
第十天实现了按住shift进行多选的操作
过程指南
1.选中一个复选框
2.按住shift选择另一个复选框
3.两个复选框之间的项会改变状态
const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');
let lastChecked;
function handleChecked(e){
let inBetween = false;
if(e.shiftKey && this.checked) {
console.log("yes");
checkboxes.forEach(checkbox => {
console.log(checkbox);
if (checkbox === this || checkbox === lastChecked) {
inBetween = !inBetween;
}
if (inBetween) {
if (checkbox.checked === true) {
checkbox.checked = false;
} else {
checkbox.checked = true;
}
}
});
console.log(this);
}
lastChecked = this;
}
checkboxes.forEach(checkbox => checkbox.addEventListener("click",handleChecked));
本次练习主要使用了 inBetween 来确认是否处于两个复选框之间,lastChecked代表上次选中的复选框,没什么难度
以上就是我在day10中学到的知识,这里我同样参考了soyaine的中文指南,感谢