汤不热吧使用JavaScript实现鼠标拖拽批量勾选CheckBox
最近工作里要做一点流程审核的事，审核的业务表单上有很多checkbox需要勾选，一个一个点非常麻烦，但是又不能简单加个全选或者全不选，因为实际情况确实就是有的要选有的不要选，但是有个规律就是不管选与不选，都是比较集中，所以很想用鼠标直接像选择大段文本那样选择checkbox。 个人对于前端并不熟悉，琢磨了一阵总算写了出来，share一下，有需要的拿走 不谢。
直接上code
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
document.onselectstart = function() {
return false;
};
var divFlag = document.createElement('div');
document.body.appendChild(divFlag);
function getElementAbsoluteOffset(element) {
var absolute_offset_top = element.offsetTop;
var absolute_offset_left = element.offsetLeft;
var parent_node = element.offsetParent;
while (parent_node !== null) {
absolute_offset_top += parent_node.offsetTop;
absolute_offset_left += parent_node.offsetLeft;
parent_node = parent_node.offsetParent;
}
return [absolute_offset_top, absolute_offset_left];
}
function getMousePos(event) {
var e = event || window.event;
return {
'x': e.clientX + document.body.scrollLeft,
'y': e.clientY + document.body.scrollTop
}
}
var downX = -1;
var downY = -1;
var upX = -1;
var upY = -1;
var isMouseDown = false;
var isTurnOn = -1;
$(document).mousedown(function(event) {
isMouseDown = true;
isTurnOn = -1;
var locationXY = getMousePos(event);
if (locationXY) {
downX = locationXY['x'];
downY = locationXY['y'];
}
});
$(document).mouseup(function(event) {
isMouseDown = false;
divFlag.style.width = 0;
divFlag.style.height = 0;
divFlag.style.display = 'none';
var locationXY = getMousePos(event);
if (locationXY) {
upX = locationXY['x'];
upY = locationXY['y'];
var maxX = Math.max(upX, downX);
var minX = Math.min(upX, downX);
var maxY = Math.max(upY, downY);
var minY = Math.min(upY, downY);
if (downX > -1 && downY > -1 && upX > -1 && upY > -1 && Math.abs(downX - upX) > 5 && Math.abs(downY - upY) > 5) {
$('input[type="checkbox"]').each(function(i, v) {
var xy = getElementAbsoluteOffset(v);
console.log(xy);
console.log(maxX);
console.log(maxY);
console.log(minX);
console.log(minY);
if (xy[1] >= minX && xy[1] <= maxX && xy[0] >= minY && xy[0] <= maxY) {
if (isTurnOn == -1) {
if (v.checked) {
isTurnOn = 0;
} else {
isTurnOn = 1;
}
}
v.checked = (isTurnOn == 1);
}
});
} else {
downX = -1;
upX = -1;
downY = -1;
upY = -1;
}
} else {
downX = -1;
upX = -1;
downY = -1;
upY = -1;
}
});
$(document).mousemove(function(event) {
if (isMouseDown) {
var locationXY = getMousePos(event);
if (locationXY) {
upX = locationXY['x'];
upY = locationXY['y'];
if (downX > -1 && downY > -1 && upX > -1 && upY > -1 && Math.abs(downX - upX) > 5 && Math.abs(downY - upY) > 5) {
divFlag.style.display = 'block';
divFlag.style.width = (Math.abs(downX - upX));
divFlag.style.height = (Math.abs(downY - upY));
divFlag.style.position = "absolute";
divFlag.style.left = Math.min(downX, upX);
divFlag.style.top = Math.min(downY, upY);
divFlag.style.border = "1px solid red";
}
}
}
});
})();