利用鼠标框选checkbox-JS实现

这是一篇关于我怎样花了四个小时并借鉴前人代码链接地址才完成的一个用鼠标框选checkbox的一篇文章。这是某厂在我投递简历后要我先完成并放在github上给它看的效果图。先来说下要完成这张所需要的功能：鼠标按下后，选中的内容中所有复选框（checkbox）都需为“checked”；鼠标点击其他位置后之前选中的内容都归原，也即初始化。需求讲完了，那就直接上代码吧。<!DOCTYPE html&

ExMaterial

804人浏览 · 2022-05-17 23:08:53

ExMaterial · 2022-05-17 23:08:53 发布

这是一篇关于我怎样花了四个小时并借鉴前人代码链接地址才完成的一个用鼠标框选checkbox的一篇文章。

这是某厂在我投递简历后要我先完成并放在github上给它看的效果图。

在这里插入图片描述

先来说下要完成这张所需要的功能：

鼠标按下后，选中的内容中所有复选框（checkbox）都需为“checked”；
鼠标点击其他位置后之前选中的内容都归原，也即初始化。

需求讲完了，那就直接上代码吧。

<!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>CheckboxSelect</title>
    <style>
        #app {
            /* 给div定宽，多行显示更易查看效果 */
            width: 200px;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck">
        <input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck">
        <input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck">
        <input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck">
        <input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck">
        <input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck">
        <input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck">
        <input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck">
        <input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck">
        <input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck">
        <input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck">
        <input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck">
    </div>

    <script>
        (function () {
            document.onmousedown = function() {
                let boxList = [];
                // getElementsByTagName返回带有指定标签名的对象的集合
                let boxes = document.getElementsByTagName("input");
                for (let i = 0; i < boxes.length; i++) {
                    boxList.push(boxes[i]);
                }
                let isSelect = true;
                // 获取事件触发后的event对象，做了一个兼容性处理
                let evt = window.event || arguments[0];
                // 存放鼠标点击初始位置
                let startX = (evt.x || evt.clientX);
                let startY = (evt.y || evt.clientY);  

                // 创建一个框选元素
                let selDiv = document.createElement("div");
                // 给框选元素添加css样式，使用绝对定位
                selDiv.style.cssText = "position:absolute; width:0px; height:0px; font-size:0px; margin:0px; padding:0px; border:1px dashed #0099FF; z-index:1000; filter:alpha(opacity:60); opacity:0.6; display:none";
                // 添加ID
                selDiv.id = "selectDiv";
                // appendChild()向节点添加最后一个子节点
                document.body.appendChild(selDiv);
                // 根据起始位置，添加定位
                selDiv.style.left = startX + "px";
                selDiv.style.top = startY + "px";

                // 根据坐标给选框修改状态
                let _x = null;
                let _y = null;
                // 移动鼠标
                document.onmousemove = function() {
                    evt = window.event || arguments[0];
                    if (isSelect) {
                        if (selDiv.style.display == "none") {
                            selDiv.style.display = "";
                        }
                        // 获取当前鼠标位置
                        _x = (evt.x || evt.clientX);
                        _y = (evt.y || evt.clientY);
                        selDiv.style.left = Math.min(_x, startX) + 'px';
                        selDiv.style.top = Math.min(_y, startY) + 'px';
                        selDiv.style.width = Math.abs(_x - startX) + 'px';
                        selDiv.style.height = Math.abs(_y - startY) + 'px';

                        let _l = selDiv.offsetLeft;
                        let _t = selDiv.offsetTop;
                        let _w = selDiv.offsetWidth;
                        let _h = selDiv.offsetHeight;
                        for (let i = 0; i < boxList.length; i++) {
                            let sl = boxList[i].offsetWidth + boxList[i].offsetLeft;
                            let st = boxList[i].offsetHeight + boxList[i].offsetTop;

                            if (sl > _l && st > _t && boxList[i].offsetLeft < _l + _w && boxList[i].offsetTop < _t + _h) {
                                boxList[i].checked = true;
                            }
                        }
                    }
                }

                // 放开鼠标，选框消失
                document.onmouseup = function () {
                    isSelect = false;
                    if (selDiv) {
                        document.body.removeChild(selDiv);
                    }

                    boxList = null, _x = null, _y = null, selDiv = null, startX = null, startY = null, evt = null;
                }

                // 按其他地方重置
                boxList.forEach((item, index) => {
                    item.checked = false;
                })
            }
        })();
    </script>
</body>
</html>

AtomGit 开源协作平台测评赛

瓜分20万奖金获得内推名额丰厚实物奖励易参与易上手

更多推荐

ADS1292R 使用过程心电图高精度ADC模块

文章目录1 Fundamentals ofPrecision ADC Noise Analysis 精密模数转换器噪声分析基础1 Fundamentals ofPrecision ADC Noise Analysis 精密模数转换器噪声分析基础https://www.ti.com.cn/cn/lit/wp/slyy192/slyy192.pdf?ts=1600659610730&ref_u

开放原子开发者工作坊

实现一个家庭安防与环境监测系统（一）

开放原子开发者工作坊

【cf】Codeforces Round #774 (Div. 2) 前4题

题目A. Square Counting 简单数学题目大意题解代码B. Quality vs Quantity 排序题目大意题解代码C. Factorials and Powers of Two 状态压缩dp+位运算题目大意题解代码D. Weight the Tree 树形dp+dfs题目大意题解代码E. Power Board 看起来像是数论？许多年没打cf了，偶尔打了一盘，恢复紫名了。A. S