绿绦工作室绿绦编程绿绦综合信息网

首页 JAVASCRIPT

拉框选择复选框

收藏本信息编号：169 发布时间：2009-07-16 截止日期：地区：

在复选框的处理上我们常用的功能有全选、反选、全不选

但很多地方我门会选择其中的一部分,这个时候总是要去点选很麻烦

现在终于有了拉框选择复选框这样实现真正的快速选择了具体代码如下可直接运行看效果

<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_fckprotectedatt="%20onmousedown%3D%22initselect()%22" onmousemove=startselect() onmouseup=endselect() onselectstart_fckprotectedatt="%20onselectstart%3D%22return%20false%3B%22" 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" _fcksavedurl="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_fckprotectedatt="%20onclick%3D%22change(this.checked)%22">
                <button onClick_fckprotectedatt="%20onClick%3D%22checkAll()%22">清空</button>
                </form>
                </div>
                </td></tr>
                </table>
                </body>
                </html>

　

发布人信息

联系人：wumingwei 查看该用户发布的所有信息
电话：
邮箱：
地址：

相关文章

1970-01-01 弹出具有选择进行链接到其它页的的对话框...
1970-01-01 拉框选择复选框

[错误报告] [推荐] [收藏][打印] [关闭] [返回顶部]

当前共有0人发表了评论.

免费发布信息

推荐信息

最新信息

网站首页 | 关于我们 | 联系方式 | 招聘信息 | 版权声明 | 网站地图 | 广告预订 |
CopyRight 2008---2010 绿绦工作室版权所有
在线咨询：

蜀ICP备09025375号绿绦综合信息网