拖曳选取复选框
<html><SCRIPT language=JavaScript>var x0;var y0;var selectenable=0;function initChkBox(obj){var coll=document.forms["form1"].tags("input"); for (i=0;i<coll.length;i++){ if (coll.item(i).name.substr(0,2)=="ck") { var offsetTop = 0; var offsetLeft = 0; var objP = coll.item(i); while (objP.tagName!="BODY"&&objP){ offsetTop += objP.offsetTop; offsetLeft += objP.offsetLeft; objP = objP.offsetParent; } coll.item(i).X=offsetLeft+10; coll.item(i).Y=offsetTop+10; //alert(coll.item(i).X+","+coll.item(i).Y+","+coll.item(i).offsetHeight); } }}function initselect() { if (window.event.srcElement.tagName=="BODY") { window.event.returnValue = true; return; } x0=document.body.scrollLeft+event.clientX; y0=document.body.scrollTop+event.clientY; selectarea.setCapture(); selectenable=1;}function startselect() { if (selectenable==1) { selectarea.style.visibility='visible'; if(document.body.scrollLeft+event.clientX-x0>0) { selectarea.style.left=x0; selectarea.style.width=document.body.scrollLeft+event.clientX-x0; } else{ selectarea.style.left=document.body.scrollLeft+event.clientX; selectarea.style.width=x0-(document.body.scrollLeft+event.clientX); } if (document.body.scrollTop+event.clientY-y0>0) { selectarea.style.top=y0; selectarea.style.height=document.body.scrollTop+event.clientY-y0; } else{ selectarea.style.top=document.body.scrollTop+event.clientY; selectarea.style.height=y0-(document.body.scrollTop+event.clientY); } } window.event.returnValue = true;}function endselect() { if (selectenable==0) return false; selectenable=0; selectarea.style.visibility='hidden'; selectarea.releaseCapture(); document.onmousemove=null; var coll=document.forms["form1"].tags("input"); for (i=0;i<coll.length;i++){ if (coll.item(i).name.substr(0,2)=="ck") { if (coll.item(i).X>selectarea.offsetLeft) if (coll.item(i).X<selectarea.offsetLeft+selectarea.offsetWidth) if (coll.item(i).Y>selectarea.offsetTop) if (coll.item(i).Y<selectarea.offsetTop+selectarea.offsetHeight) coll.item(i).checked=!coll.item(i).checked } } selectarea.style.pixelHeight=0; selectarea.style.pixelWidth=0;}function checkAll(){ document.form1.allsel.checked=false; var coll=document.forms["form1"].tags("input"); for (i=0;i<coll.length;i++){ if (coll.item(i).name.substr(0,2)=="ck") { coll.item(i).checked=false; } }}function change(v){ var f = document.forms["form1"]; for (i=0;i<f.elements.length;i++) if (f.elements[i].name.substr(0,2)=="ck") f.elements[i].checked = v;} </SCRIPT><body onmousedown="initselect()" onmousemove=startselect() onmouseup=endselect() onselectstart="return false;" onLoad=initChkBox()><table width="100%" height="100%" cellpadding="0" cellspacing="0"><tr><td> <DIV id=selectarea style="border:1px dashed black;HEIGHT: 42px; LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: hidden; WIDTH: 67px; Z-INDEX: 10"> <img src="null" height="1" width="1"> </DIV> <div id="Layer1" style="position:absolute; left:56px; top:39px; width:203px; height:401px; z-index:1"> <form name="form1" action=""> <table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#339999"> <tr bgcolor="#FFFFFF"> <td width="13%"><input type="checkbox" name="ck1" value="checkbox"></td> <td width="87%"> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck2" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck3" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck4" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck5" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck6" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck7" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck8" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck9" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck10" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck11" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck12" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck13" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck14" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck15" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck16" value="checkbox"></td> <td> </td> </tr> </table> <input type="checkbox" name="allsel" value="checkbox" onclick="change(this.checked)"> <button onClick="checkAll()">清空</button> </form> </div></td></tr> </table></body></html>