按住shift键多选demo(原生js实现)_js 实现excel shift键功能

作者：小蓝xlanll | 2024-04-24 02:14:23

踩

js 实现excel shift键功能

有更加简单的思路或者在前端上有困惑、想要一起学习

实现思路：

1.两种选择模式：①单选模式； ②多选模式；

2.直接点击，触发单选模式

3.在点击的时候，如果 shift 键处于keydown状态，则触发多选模式

4.应用于两种模式上的取消选中

代码实现:


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    html,
    body,
    div,
    ul,
    li {
        margin: 0;
        padding: 0;
    }
 
    html {
        background-color: yellowgreen;
    }
 
    .wrapper {
        width: 500px;
        margin: 80px auto 0;
        border-radius: 10px;
        background-color: #fff;
        box-shadow: 10px 10px 2px rgba(0, 0, 0, .15);
        overflow: hidden;
    }
 
    .uList {
        width: 100%;
        list-style: none;
    }
 
    .uList li {
        display: flex;
        height: 75px;
        /* background-color: red; */
        border-bottom: 1px solid rgba(0, 0, 0, .4);
    }
 
    li .check,
    li .text {
        float: left;
        height: 100%;
        text-align: center;
        line-height: 75px;
    }
 
    li .check {
        width: 65px;
        border-right: 1px solid yellowgreen;
    }
 
    .check input[type='checkbox'] {
        cursor: pointer;
    }
 
    li .text {
        flex: 1;
        font-size: 24px;
        letter-spacing: 2px;
    }
</style>
 
<body>
    <div class="wrapper">
        <ul class="uList">
            <li>
                <div class="check"><input type="checkbox" name="" id=""></div>
                <div class="text">这是一个邮件收件箱</div>
            </li>
            <li>
                <div class="check"><input type="checkbox" name="" id=""></div>
                <div class="text">每个选项都可以选择</div>
            </li>
            <li>
                <div class="check"><input type="checkbox" name="" id=""></div>
                <div class="text">如果一直按着<code>shift</code>键</div>
            </li>
            <li>
                <div class="check"><input type="checkbox" name="" id=""></div>
                <div class="text">就可以同时选择多个选项</div>
            </li>
            <li>
                <div class="check"><input type="checkbox" name="" id=""></div>
                <div class="text">如果<code>shift</code>键松开</div>
            </li>
            <li>
                <div class="check"><input type="checkbox" name="" id=""></div>
                <div class="text">则不能再继续多选</div>
            </li>
            <li>
                <div class="check"><input type="checkbox" name="" id=""></div>
                <div class="text">只使用了原生js</div>
            </li>
            <li>
                <div class="check"><input type="checkbox" name="" id=""></div>
                <div class="text">这是我的成果♪(^∇^*)
                </div>
            </li>
        </ul>
    </div>
 
 
 
    <script>
        let checkBoxes = document.querySelectorAll("input[type='checkbox']");
        let texts = document.querySelectorAll(".text");
 
        for (let i = 0; i < checkBoxes.length; i++) {
            checkBoxes[i].onclick = function (e) {
                // 如果点击的时候，按住了shift键，则进入 多选模式
                if (e.shiftKey && this.checked) {
                    if (checkBoxes[i].checked === true) {
                        texts[i].innerHTML = `<del>${texts[i].innerHTML}</del>`;
                    }
                }
 
                // 如果点击复选框的时候，没有按shift键，则进入 单选模式
                else if (this.checked === true && !e.shiftKey) {
                    for (let j = 0; j < texts.length; j++) {
                        texts[j].innerHTML = texts[j].innerHTML.replace("</del>", "").replace("<del>", "");
                        checkBoxes[j].checked = false;
                    }
                    this.checked = true;
                    texts[i].innerHTML = `<del>${texts[i].innerHTML}</del>`;
                }
 
                // 如果取消选中，则文本删除线消失
                if (this.checked === false) {
                    texts[i].innerHTML = texts[i].innerHTML.replace("</del>", "").replace("<del>", "");          // 通过 字符串的replace()方法，把del标签删去
                }
            }
        }
 
 
 
 
    </script>
</body>
 
</html>

效果展示：

shift key案例展示

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/477123