<html> <head> <SCRIPT language=JavaScript> /*-------------------------------------------- 本程序为鼠标框选择 多选框 辅助 帮手,还有不足. 1. 多选框不能单独放置body标签中. 2. 使用名称为多选框ck 自然数, 如ck1. 3. 先这么多吧，可能还有... 制片人：八神奄奄一息 QQ:13730452 --------------------------------------------*/ 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; objPobjP = 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.οnmοusemοve=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) && (coll.item(i).X<selectarea.offsetLeft selectarea.offsetWidth)) && ((coll.item(i).Y>selectarea.offsetTop) && (coll.item(i).Y<selectarea.offsetTop selectarea.offsetHeight))){ coll.item(i).checked=!coll.item(i).checked;} */ 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 hideselect() { //if (document.body.scrollLeft event.clientX==x0 && document.body.scrollTop event.clientY==y0 && event.srcElement!=selectarea) selectarea.style.visibility='hidden'; }*/ 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> <script language="JavaScript" type="text/JavaScript"> <!-- function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape") && (parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; οnresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); //--> </script> <title>鼠标框多选框</title> </head> <body οnmοusedοwn="initselect()" οnmοusemοve=startselect() οnmοuseup=endselect() onselectstart="return false;" onLoad=initChkBox()> <table width="100%" height="100%" cellpadding="0" cellspacing="0" bgcolor="efefef"> <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" οnclick="javascript:window.open(this.src);" style="CURSOR: pointer" οnlοad="return imgzoom(this,550)"> </DIV> <div id="Layer1" style="position:absolute; left:256px; top:39px; width:203px; height:401px; z-index:1"> <form name="form1" action=""> <tablewidth="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> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck17" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck18" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck19" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck20" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck21" value="checkbox"></td> <td> </td> </tr> </table> <input type="checkbox" name="allsel" value="checkbox" οnclick="change(this.checked)"> <button onClick="checkAll()">清空</button> </form> </div> </td></tr> </table> </body> </html>