JavaScript30 Day 10

这是我在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的中文指南，感谢