html鼠标选择一个区域，把该区域checkbox 都选中
Q: html鼠标选择一个区域，把该区域checkbox 都选中
A:
效果一般
Code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script language="javascript">
var downX;
var downY;
var isSelecting = false;
function mUp(ev) {
var region = document.getElementById("region");
region.style.display = "none";
if (!ev) ev = window.event;
if (isSelecting) {
isSelecting = false;
var inputs = document.getElementsByTagName("input");
for (i = 0; i < inputs.length; i++) {
if (inputs[i].type == "checkbox") {
if (jiechu(downX, downY, ev.clientX, ev.clientY, inputs[i])){
inputs[i].checked = true;
}
}
}
}
}
function jiechu(ax, ay, bx, by, cb) {
var cbx=getX(cb);
var cby = getY(cb);
var cbw = cb.clientWidth;
var cbh = cb.clientHeight;
if ((cbx - ax) * (cbx - bx) < 0 && (cby - ay) * (cby - by) < 0) return true;
if ((cbx - ax) * (cbx - bx) < 0 && ((cby + cbh) - ay) * ((cby + cbh) - by) < 0) return true;
if (((cbx + cbw) - ax) * ((cbx + cbw) - bx) < 0 && (cby - ay) * (cby - by) < 0) return true;
if (((cbx + cbw) - ax) * ((cbx + cbw) - bx) < 0 && ((cby + cbh) - ay) * ((cby + cbh) - by) < 0) return true;
return false;
}
function getX(obj) {
return obj.offsetLeft + (obj.offsetParent ? getX(obj.offsetParent) : obj.x ? obj.x : 0);
}
function getY(obj) {
return (obj.offsetParent ? obj.offsetTop + getY(obj.offsetParent) : obj.y ? obj.y : 0);
}
function mDown(ev) {
if (!ev) ev = window.event;
isSelecting = true;
downX = ev.clientX;
downY = ev.clientY;
var region = document.getElementById("region");
region.style.top = downY + "px";
region.style.left = downX + "px";
region.style.display = "block";
}
function mMove(ev) {
if (!ev) ev = window.event;
var region = document.getElementById("region");
if (ev.clientX > downX) {
region.style.left = downX + "px";
}
else {
region.style.left = ev.clientX + "px";
}
if (ev.clientY > downY) {
region.style.top = downY + "px";
}
else {
region.style.top = ev.clientY + "px";
}
region.style.width = Math.abs(ev.clientX - downX) + "px";
region.style.height = Math.abs(ev.clientY- downY) + "px";
}
</script>
</head>
<body onmousedown="mDown(event)" onmousemove="mMove(event)" onmouseup="mUp(event)">
<div id="region" style="position:absolute;top:0px;left:0px;border:1px red solid;display:none"></div>
<table id="tbl">
<tr>
<td>
<input id="Checkbox1" type="checkbox" />aa
</td>
<td>
<input id="Checkbox2" type="checkbox" />bb
</td>
<td>
<input id="Checkbox3" type="checkbox" />cc
</td>
</tr>
<tr>
<td>
<input id="Checkbox4" type="checkbox" />dd
</td>
<td>
<input id="Checkbox5" type="checkbox" />ee
</td>
<td>
<input id="Checkbox6" type="checkbox" />ff
</td>
</tr>
<tr>
<td>
<input id="Checkbox7" type="checkbox" />gg
</td>
<td>
<input id="Checkbox8" type="checkbox" />hh
</td>
<td>
<input id="Checkbox9" type="checkbox" />ii
</td>
</tr>
</table>
</body>
</html>
