按住shift键对checkbox进行连选

      效果：按住shift在区域内连选-------按照shift键进行勾选时候，如果两次勾选之间有未勾选的复选框，自动进行勾选。
      主要思想：获取指定区域内的所有checkbox，在勾选时监视是否按住了shift，如果按住，两次勾选之间的复选框分别设置成勾选状态。
      目前测试了ie6、ie7、firefox，其它浏览器未做测试。用javascript完成。
      javascript部分：

javascript代码
  1/**//*****按住shift键对复选框进行连续多选******/
  2/**//*****
  3******author:huankfy
  4******time:2009-08-07
  5******/
  6function SectionCheckBoxSelector(containerId){
  7    this._container = document.getElementById(containerId)||containerId;
  8    this._containerId = containerId;
  9    this._checkBoxList = new Array();
 10    this._keyCode = 0;
 11    this._startPosition = -1 ;
 12    this._ShiftClickQuene = new Array(2);//按住shift键时，最后两次click的checkbox
 13    this._eventArray = new Array();
 14    this._iniCheckBox();
 15}
 16
 17SectionCheckBoxSelector.prototype._iniCheckBox = function(){
 18    this._getCheckBoxs();
 19    this._hookOriginalEvent();
 20    
 21    for(var i=0;i<this._checkBoxList.length;i++){
 22        this._checkBoxList[i].onclick = this._checkBoxEvent;
 23        this._checkBoxList[i].sectionObj = this;
 24        this._checkBoxList[i].onkeydown = this._sniperKeyDown;
 25        this._checkBoxList[i].onkeyup = this._sniperKeyUp;
 26    }    
 27}
 28
 29SectionCheckBoxSelector.prototype._getCheckBoxs = function(){
 30    var chkBoxs = this._container.getElementsByTagName("input");
 31    if(chkBoxs==null ||chkBoxs==undefined || chkBoxs.length==0) return;
 32    
 33    for(var i=0,num=0;i<chkBoxs.length;i++){
 34        if(chkBoxs[i].type!="checkbox") continue;
 35        chkBoxs[i].number = num++;
 36        this._checkBoxList.push(chkBoxs[i]);
 37    }
 38}
 39
 40SectionCheckBoxSelector.prototype._hookOriginalEvent = function(){
 41    for(var i=0;i<this._checkBoxList.length;i++){
 42        var tmpClick = this._checkBoxList[i].onclick;
 43        if(tmpClick){
 44            var identyfer = this._containerId+this._checkBoxList[i].number;
 45            this._eventArray[identyfer] = tmpClick;
 46        }    
 47    }    
 48}
 49
 50SectionCheckBoxSelector.prototype._checkBoxEvent = function(){
 51    var chk = this;
 52    var sectionObj = chk.sectionObj;
 53
 54    var identyfer = sectionObj._containerId+chk.number;
 55    if(sectionObj._eventArray[identyfer])
 56        sectionObj._eventArray[identyfer].call(chk);
 57
 58    if(chk.checked==false && sectionObj._keyCode!=16) return;
 59
 60    if(sectionObj._keyCode!=16){ 
 61        sectionObj._ShiftClickQuene = new Array(2);
 62        sectionObj._startPosition = chk.number;
 63        return;
 64    }    
 65
 66    sectionObj._recordClick(chk,sectionObj);
 67    sectionObj._shiftPressedAndClick(sectionObj,chk.number);
 68}
 69
 70SectionCheckBoxSelector.prototype._sniperKeyDown = function(){
 71    var event = window.event || arguments[0];
 72    this.sectionObj._keyCode = event.keyCode;
 73}
 74
 75SectionCheckBoxSelector.prototype._sniperKeyUp = function(){
 76    this.sectionObj._keyCode = 0;
 77}
 78
 79SectionCheckBoxSelector.prototype._recordClick = function(chkBox,sectionObj){
 80    sectionObj._ShiftClickQuene[1] = sectionObj._ShiftClickQuene[0];
 81    sectionObj._ShiftClickQuene[0] = chkBox;
 82}    
 83
 84SectionCheckBoxSelector.prototype._shiftPressedAndClick = function(sectionObj,curNumber){
 85    sectionObj._setUnChecked(sectionObj);
 86    
 87    var curNumber = curNumber; 
 88    var counter = sectionObj._startPosition;
 89
 90    if(counter==-1){ //直接按下shift进行勾选，此时的处理的起始点为当前checkbox
 91        counter = curNumber;
 92        sectionObj._startPosition = counter;
 93    }    
 94            
 95    if(counter>curNumber){
 96        var tmp = counter;
 97        counter = curNumber;
 98        curNumber = tmp;
 99    }
100    
101    while(counter<=curNumber){
102        var chk = sectionObj._checkBoxList[counter];
103        chk.checked = true;
104        
105        var identyfer = sectionObj._containerId + chk.number;
106        var tmpClick = this._eventArray[identyfer];
107        if(tmpClick)
108            tmpClick.call(chk);
109            
110        ++counter;
111    }
112}
113
114SectionCheckBoxSelector.prototype._setUnChecked = function(sectionObj){
115    var chkList = sectionObj._checkBoxList;
116    
117    var pos = sectionObj._getClearPos(sectionObj);
118    var start = pos.start;
119    var end = pos.end;
120    if(start!=-1){
121        for(var i=start;i<chkList.length&&i<=end;i++){
122            var chk = chkList[i];
123            chk.checked = false;
124            
125            var identyfer = sectionObj._containerId + chk.number;
126            var tmpClick = this._eventArray[identyfer];
127            if(tmpClick)
128                tmpClick.call(chk);
129        }    
130    }        
131}
132
133SectionCheckBoxSelector.prototype._getClearPos = function(sectionObj){
134    var quen = sectionObj._ShiftClickQuene;
135    var start = quen[1]==null?-1:quen[1].number;
136    var end = quen[0]==null?start:quen[0].number;
137    if(start>end){
138        var tmp = start;
139        start = end;
140        end = tmp;
141    }
142    
143    return {"start":start,"end":end};
144}    

      调用方式为：

new  SectionCheckBoxSelector( " chkContainer " );  //  chkContainer为checkbox所在容器的id
//  new SectionCheckBoxSelector(chkContainer); // chkContainer为checkbox所在的容器

      html部分为：

Html部分
<div id="chkContainer">
    <div>按住shift可进行联系选择</div>
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
</div>

      缺点：
     设计的较差，SectionSelector暴露了太多给checkbox操作，整个对象附加到checkbox上。以下划线命名的部分应该做信息隐藏，而不是暴露，但能力有限，不知该如何做信息隐藏。
     限制：
     当前已处理onclick事件，checkbox的onclick事件不受影响。onmousedown和onmouseover未做处理，如果checkbox有这两个事件，会被劫持掉。

      ps:附上源码，请大家指正。SectionSelector源码下载

　　源码做了修改，使用了事件注册机制，解决了内存泄露问题

转载于:https://www.cnblogs.com/huankfy/articles/1541460.html