鼠标框选多选框

最新推荐文章于 2022-11-26 22:59:56 发布
最新推荐文章于 2022-11-26 22:59:56 发布
阅读量137 收藏
点赞数
分类专栏： Javascript 文章标签： JavaScript QQ F# ViewUI 
<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="">
      <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>
        <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>

 

iteye_14206
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
鼠标框选多选框、复选框
11-26
js实现拖动鼠标框选复选框,想要的来下吧
c#实现的鼠标框选多个控件
02-28
c#实现的鼠标框选多个控件，用的是vs2005 ，可以直接运行
计算机中选中多个文件的快捷键,电脑操作过程中同时选定多个文件的方法
热门推荐
weixin_32328999的博客
07-26 3万+
我们在操作电脑的时候会需要用到选定多个文件夹。那么该如何操作呢?下面学习啦小编就为大家介绍一下具体的操作方法吧，欢迎大家参考和学习。以下方法只是合适在同级目录下多文件时使用。所谓同级目录，简单的说打开一个文件夹，所看到的所有文件(包含文件夹)叫做同级目录。比如双击打开E盘，那么E盘下所有的文件都是同级。打个比方打开E:\和E:\1这个不是同级。打开盘或者文件夹，看到文件夹里的东西就叫同级目录，再打...
html5实现鼠标框选,JS实现鼠标框选效果完整实例
weixin_30075185的博客
06-05 1196
本文实例讲述了JS实现鼠标框选效果的方法。分享给大家供大家参考，具体如下：/p>"http://www.w3.org/TR/html4/strict.dtd">鼠标框选效果*{padding:0;margin:0;}#bottom{position:absolute;bottom:0px;width:100%;height:40px;border:1px solid #000;back...
利用鼠标框选checkbox-JS实现
weixin_49172439的博客
05-17 848
这是一篇关于我怎样花了四个小时并借鉴前人代码链接地址才完成的一个用鼠标框选checkbox的一篇文章。 这是某厂在我投递简历后要我先完成并放在github上给它看的效果图。 先来说下要完成这张所需要的功能： 鼠标按下后，选中的内容中所有复选框（checkbox）都需为“checked”； 鼠标点击其他位置后之前选中的内容都归原，也即初始化。 需求讲完了，那就直接上代码吧。 <!DOCTYPE html> <html lang="en"> <head> &lt
WPF实现鼠标拖动框选功能
dnazhd的博客
05-13 4640
本实例主要是使用WPF实现拖动鼠标画出矩形框同时框选控件的功能，效果如下：
html5实现鼠标框选,使用原生js编写一个简单的框选功能方法
weixin_29369363的博客
06-05 3269
今天我们来聊一下怎么使用原生javascript编写一个简单的框选功能。需求描述鼠标左键按下不放，移动鼠标出现矩形选框；鼠标左键松开，根据上边出现的矩形选框统计选框范围内的DOM元素；嗯...上边的功能描述看着是挺简单的，但实现起来也还是会有些地方需要斟酌思考的。比如，如果我们的框选范围不是document.body，而是某一个div里边进行框选呢？而现实开发过程中，我们会遇上的应该就是第二种情况...
Unity 如何实现框选游戏战斗单位
当代野生程序猿
11-26 3193
如何实现即时战略游戏中的框选战斗单位功能
html 复选框拖拽多选,js实现鼠标拖拽多选功能
weixin_39692245的博客
06-09 850
最近做了一个用js实现鼠标拖拽多选的功能，于是整理了一下思路，写了一个小demo：遮罩出现：被遮罩盖住的，即为选中的块(背景色为粉色)下面是具体代码，注释已在文中，与大家交流。鼠标拖拽多选功能*{box-sizing:border-box;}ul{width:500px;height:auto;margin:0;padding:20px;font-size: 0;/*需设置定位*/position...
C#鼠标框选cheakbox
09-08
在本文中，我们将深入探讨如何在WPF（Windows Presentation Foundation）环境中实现"C#鼠标框选checkbox"的功能。...在实际开发中，你可能还需要考虑更多细节，如键盘交互、多选框排序等，以满足各种应用场景的需求。
jquery实现鼠标框选多个页面元素
06-11
总结来说，jQuery的DrawSelect插件是一个强大的工具，它使得在网页上实现鼠标框选多个元素变得简单易行。开发者只需要少量的代码就可以让用户的交互体验大幅提升，同时通过调整插件的配置可以满足各种定制化的需求。...
JS实现鼠标框选效果完整实例
10-22
在JavaScript编程中，实现鼠标框选效果是一种常见的交互功能，特别是在网页编辑器...此实例中的代码提供了一个基础框架，可以根据实际需求进行扩展，如添加拖拽调整框选框、多选框支持、框选完成后执行特定操作等功能。
用C# 实现鼠标框选效果的实现代码
09-05
请注意，这个示例仅处理了最基础的鼠标框选操作，实际应用中可能需要处理更多复杂情况，例如处理多选、取消选择、限制框选范围等。此外，如果要在框选后执行特定的操作，如筛选或处理框选到的对象，还需要添加相应的...
QT ： 鼠标框选
AI.PLAY
03-31 5128
在界面交互中，框选是一个基本操作，涉及到事件有鼠标按下，鼠标移动，鼠标释放，监听这三个事件，再结合程序中设置标志。便可事件鼠标框选的功能。 鼠标按下事件 void CropView::mousePressEvent(QMouseEvent *event) { if(event-&gt;button() == Qt::LeftButton){ m_startpoint = e...
java多选框回显_复选框在页面上回显值
weixin_39937312的博客
02-25 1113
1、在jsp页面上：checked="checked">缴纳税金checked="checked">资料已齐全等待办理checked="checked">产权办理中checked="checked">房本已发放2、在js中获取选中的复选框的值，在数据库中多个选中的用逗号隔开存储在一个字段上(1)引入标签：(2)获取页面上选择的复选框的值：var certDlStatus=[...
mapbox实现鼠标框选选中图层功能
Lee的博客
02-17 2474
mapbox实现鼠标框选选中图层功能
【SCI一区】Matlab实现蛇群优化算法SO-CNN-LSTM-Attention的风电功率预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
Axure大屏可视化模板科技感原件.rp
最新发布
07-29
Axure大屏可视化是指使用Axure RP这款原型设计工具来创建具有视觉冲击力和数据展示功能的大屏幕界面。Axure以其强大的交互设计和丰富的组件库，成为了实现大屏可视化的重要工具之一。
echarts折线图鼠标框选放大
12-14
要实现echarts折线图鼠标框选放大，可以使用dataZoom组件。具体步骤如下： 1.在option中添加dataZoom组件，设置type为inside，xAxisIndex为0（如果有多个x轴的话），startValue和endValue为0和100，表示默认情况下x...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值