鼠标框选多选框

  1. <html>
  2. <head>
  3. <SCRIPT language=JavaScript>
  4. /*--------------------------------------------
  5. 本程式为鼠标框选 多选框 辅助 帮手,其中还有不足.
  6. 1. 不能将多选框单独放到body标签中.
  7. 2. 多选框使用名子为ck+自然数, 如ck1.
  8. 3. 就先这么多吧,可能还有...........
  9.        制作者:八神奄 QQ:13730452
  10. --------------------------------------------*/
  11. var x0;
  12. var y0;
  13. var selectenable=0;
  14. function initChkBox(obj){
  15. var coll=document.forms["form1"].tags("input");
  16.     for (i=0;i<coll.length;i++){
  17.      if (coll.item(i).name.substr(0,2)=="ck") {
  18.    var offsetTop = 0;
  19.    var offsetLeft = 0;
  20.    var objP = coll.item(i);
  21.    while (objP.tagName!="BODY" && objP){
  22.     offsetTop += objP.offsetTop;
  23.     offsetLeft += objP.offsetLeft;
  24.     objPobjP = objP.offsetParent;
  25.    }
  26.    coll.item(i).X=offsetLeft+10;
  27.    coll.item(i).Y=offsetTop+10;
  28.    //alert(coll.item(i).X+","+coll.item(i).Y+","+coll.item(i).offsetHeight);
  29.   }
  30.  }
  31. }
  32. function initselect() {
  33.        if (window.event.srcElement.tagName=="BODY") {
  34.         window.event.returnValue = true;
  35.         return;
  36.        }
  37.     
  38.         x0=document.body.scrollLeft+event.clientX;
  39.      y0=document.body.scrollTop+event.clientY;
  40.   selectarea.setCapture();
  41.      selectenable=1;
  42. }
  43. function startselect() {
  44.     if (selectenable==1) {
  45.         selectarea.style.visibility='visible';
  46.   
  47.         if(document.body.scrollLeft+event.clientX-x0>0) {
  48.       selectarea.style.left=x0;
  49.       selectarea.style.width=document.body.scrollLeft+event.clientX-x0;
  50.     }
  51.         else{
  52.       selectarea.style.left=document.body.scrollLeft+event.clientX;
  53.       selectarea.style.width=x0-(document.body.scrollLeft+event.clientX);
  54.      }
  55.         if (document.body.scrollTop+event.clientY-y0>0) {
  56.      selectarea.style.top=y0
  57.      selectarea.style.height=document.body.scrollTop+event.clientY-y0;
  58.      }
  59.        else{
  60.      selectarea.style.top=document.body.scrollTop+event.clientY;
  61.      selectarea.style.height=y0-(document.body.scrollTop+event.clientY);
  62.      }
  63.  }
  64.     window.event.returnValue = true;
  65. }
  66. function endselect() {
  67.  if (selectenable==0) return false;
  68.     selectenable=0;
  69.  selectarea.style.visibility='hidden';
  70.  selectarea.releaseCapture(); 
  71.  document.onmousemove=null;
  72.  var coll=document.forms["form1"].tags("input");
  73.     for (i=0;i<coll.length;i++){
  74.      if (coll.item(i).name.substr(0,2)=="ck") {
  75. /*   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))){
  76.      coll.item(i).checked=!coll.item(i).checked;}
  77. */     
  78.    if (coll.item(i).X>selectarea.offsetLeft)
  79.     if (coll.item(i).X<selectarea.offsetLeft+selectarea.offsetWidth)  
  80.      if (coll.item(i).Y>selectarea.offsetTop)
  81.       if (coll.item(i).Y<selectarea.offsetTop+selectarea.offsetHeight)
  82.        coll.item(i).checked=!coll.item(i).checked
  83.   }
  84.  } 
  85.  selectarea.style.pixelHeight=0;
  86.  selectarea.style.pixelWidth=0;
  87. }
  88. /*function hideselect() {
  89.     //if (document.body.scrollLeft+event.clientX==x0  &&  document.body.scrollTop+event.clientY==y0  &&  event.srcElement!=selectarea)
  90.     selectarea.style.visibility='hidden';
  91. }*/
  92. function checkAll(){
  93.   document.form1.allsel.checked=false;
  94.   var coll=document.forms["form1"].tags("input");
  95.     for (i=0;i<coll.length;i++){
  96.      if (coll.item(i).name.substr(0,2)=="ck") {
  97.        coll.item(i).checked=false;
  98.    }
  99.   }
  100. }
  101. function change(v){
  102.   var f = document.forms["form1"];
  103.   for (i=0;i<f.elements.length;i++)
  104.     if (f.elements[i].name.substr(0,2)=="ck") f.elements[i].checked = v;
  105. </SCRIPT>
  106. <script language="JavaScript" type="text/JavaScript">
  107. <!--
  108. function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  109.   if (init==true) with (navigator) {if ((appName=="Netscape") && (parseInt(appVersion)==4)) {
  110.     document.MM_pgW=innerWidthdocument.MM_pgH=innerHeightonresize=MM_reloadPage; }}
  111.   else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
  112. }
  113. MM_reloadPage(true);
  114. //-->
  115. </script>
  116. <title>鼠标框选多选框</title>
  117. </head>
  118. <body onmousedown="initselect()" onmousemove=startselect() onmouseup=endselect() onselectstart="return false;" onLoad=initChkBox()>
  119. <table width="100%" height="100%" cellpadding="0" cellspacing="0" bgcolor="efefef">
  120. <tr><td>
  121.   <DIV id=selectarea style="border:1px dashed black;HEIGHT: 42px; LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: hidden; WIDTH: 67px; Z-INDEX: 10"> 
  122.     <img src="null" height="1" width="1" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"> </DIV>
  123.   <div id="Layer1" style="position:absolute; left:256px; top:39px; width:203px; height:401px; z-index:1"> 
  124.     <form name="form1" action="">
  125.       <table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#339999">
  126.         <tr bgcolor="#FFFFFF"> 
  127.           <td width="13%"><input type="checkbox" name="ck1" value="checkbox"></td>
  128.           <td width="87%"> </td>
  129.         </tr>
  130.         <tr bgcolor="#FFFFFF"> 
  131.           <td><input type="checkbox" name="ck2" value="checkbox"></td>
  132.           <td> </td>
  133.         </tr>
  134.         <tr bgcolor="#FFFFFF"> 
  135.           <td><input type="checkbox" name="ck3" value="checkbox"></td>
  136.           <td> </td>
  137.         </tr>
  138.         <tr bgcolor="#FFFFFF"> 
  139.           <td><input type="checkbox" name="ck4" value="checkbox"></td>
  140.           <td> </td>
  141.         </tr>
  142.         <tr bgcolor="#FFFFFF"> 
  143.           <td><input type="checkbox" name="ck5" value="checkbox"></td>
  144.           <td> </td>
  145.         </tr>
  146.         <tr bgcolor="#FFFFFF"> 
  147.           <td><input type="checkbox" name="ck6" value="checkbox"></td>
  148.           <td> </td>
  149.         </tr>
  150.         <tr bgcolor="#FFFFFF"> 
  151.           <td><input type="checkbox" name="ck7" value="checkbox"></td>
  152.           <td> </td>
  153.         </tr>
  154.         <tr bgcolor="#FFFFFF"> 
  155.           <td><input type="checkbox" name="ck8" value="checkbox"></td>
  156.           <td> </td>
  157.         </tr>
  158.         <tr bgcolor="#FFFFFF"> 
  159.           <td><input type="checkbox" name="ck9" value="checkbox"></td>
  160.           <td> </td>
  161.         </tr>
  162.         <tr bgcolor="#FFFFFF"> 
  163.           <td><input type="checkbox" name="ck10" value="checkbox"></td>
  164.           <td> </td>
  165.         </tr>
  166.         <tr bgcolor="#FFFFFF"> 
  167.           <td><input type="checkbox" name="ck11" value="checkbox"></td>
  168.           <td> </td>
  169.         </tr>
  170.         <tr bgcolor="#FFFFFF"> 
  171.           <td><input type="checkbox" name="ck12" value="checkbox"></td>
  172.           <td> </td>
  173.         </tr>
  174.         <tr bgcolor="#FFFFFF"> 
  175.           <td><input type="checkbox" name="ck13" value="checkbox"></td>
  176.           <td> </td>
  177.         </tr>
  178.         <tr bgcolor="#FFFFFF"> 
  179.           <td><input type="checkbox" name="ck14" value="checkbox"></td>
  180.           <td> </td>
  181.         </tr>
  182.         <tr bgcolor="#FFFFFF"> 
  183.           <td><input type="checkbox" name="ck15" value="checkbox"></td>
  184.           <td> </td>
  185.         </tr>
  186.         <tr bgcolor="#FFFFFF"> 
  187.           <td><input type="checkbox" name="ck16" value="checkbox"></td>
  188.           <td> </td>
  189.         </tr>
  190.         <tr bgcolor="#FFFFFF"> 
  191.           <td><input type="checkbox" name="ck17" value="checkbox"></td>
  192.           <td> </td>
  193.         </tr>
  194.         <tr bgcolor="#FFFFFF"> 
  195.           <td><input type="checkbox" name="ck18" value="checkbox"></td>
  196.           <td> </td>
  197.         </tr>
  198.         <tr bgcolor="#FFFFFF"> 
  199.           <td><input type="checkbox" name="ck19" value="checkbox"></td>
  200.           <td> </td>
  201.         </tr>
  202.         <tr bgcolor="#FFFFFF"> 
  203.           <td><input type="checkbox" name="ck20" value="checkbox"></td>
  204.           <td> </td>
  205.         </tr>
  206.         <tr bgcolor="#FFFFFF"> 
  207.           <td><input type="checkbox" name="ck21" value="checkbox"></td>
  208.           <td> </td>
  209.         </tr>
  210.       </table>
  211.       <input type="checkbox" name="allsel" value="checkbox" onclick="change(this.checked)">
  212.       <button onClick="checkAll()">清空</button>
  213.     </form>
  214.   </div>
  215. </td></tr>  
  216. </table>
  217. </body>
  218. </html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值