拖曳选取复选框

< 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% " >& nbsp; td >
         tr >
         < tr bgcolor = " #FFFFFF " >  
           < td >< input type = " checkbox "  name = " ck2 "  value = " checkbox " > td >
           < td >& nbsp; td >
         tr >
         < tr bgcolor = " #FFFFFF " >  
           < td >< input type = " checkbox "  name = " ck3 "  value = " checkbox " > td >
           < td >& nbsp; td >
         tr >
         < tr bgcolor = " #FFFFFF " >  
           < td >< input type = " checkbox "  name = " ck4 "  value = " checkbox " > td >
           < td >& nbsp; td >
         tr >
         < tr bgcolor = " #FFFFFF " >  
           < td >< input type = " checkbox "  name = " ck5 "  value = " checkbox " > td >
           < td >& nbsp; td >
         tr >
         < tr bgcolor = " #FFFFFF " >  
           < td >< input type = " checkbox "  name = " ck6 "  value = " checkbox " > td >
           < td >& nbsp; td >
         tr >
         < tr bgcolor = " #FFFFFF " >  
           < td >< input type = " checkbox "  name = " ck7 "  value = " checkbox " > td >
           < td >& nbsp; td >
         tr >
         < tr bgcolor = " #FFFFFF " >  
           < td >< input type = " checkbox "  name = " ck8 "  value = " checkbox " > td >
           < td >& nbsp; td >
         tr >
         < tr bgcolor = " #FFFFFF " >  
           < td >< input type = " checkbox "  name = " ck9 "  value = " checkbox " > td >
           < td >& nbsp; td >
         tr >
         < tr bgcolor = " #FFFFFF " >  
           < td >< input type = " checkbox "  name = " ck10 "  value = " checkbox " > td >
           < td >& nbsp; td >
         tr >
         < tr bgcolor = " #FFFFFF " >  
           < td >< input type = " checkbox "  name = " ck11 "  value = " checkbox " > td >
           < td >& nbsp; td >
         tr >
         < tr bgcolor = " #FFFFFF " >  
           < td >< input type = " checkbox "  name = " ck12 "  value = " checkbox " > td >
           < td >& nbsp; td >
         tr >
         < tr bgcolor = " #FFFFFF " >  
           < td >< input type = " checkbox "  name = " ck13 "  value = " checkbox " > td >
           < td >& nbsp; td >
         tr >
         < tr bgcolor = " #FFFFFF " >  
           < td >< input type = " checkbox "  name = " ck14 "  value = " checkbox " > td >
           < td >& nbsp; td >
         tr >
         < tr bgcolor = " #FFFFFF " >  
           < td >< input type = " checkbox "  name = " ck15 "  value = " checkbox " > td >
           < td >& nbsp; td >
         tr >
         < tr bgcolor = " #FFFFFF " >  
           < td >< input type = " checkbox "  name = " ck16 "  value = " checkbox " > td >
           < td >& nbsp; 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 >

转载于:https://www.cnblogs.com/jinchun/archive/2007/02/03/638700.html