主要思想:获取指定区域内的所有checkbox,在勾选时监视是否按住了shift,如果按住,两次勾选之间的复选框分别设置成勾选状态。当前已处理onclick事件,checkbox的onclick事件不受影响。onmousedown和onmouseover未做处理,如果checkbox有这两个事件,会被劫持掉。
效果:按住shift在区域内连选-------按照shift键进行勾选时候,如果两次勾选之间有未勾选的复选框,自动进行勾选。
主要思想:获取指定区域内的所有checkbox,在勾选时监视是否按住了shift,如果按住,两次勾选之间的复选框分别设置成勾选状态。
目前测试了ie6、ie7、firefox,其它浏览器未做测试。用javascript完成。
javascript部分:
主要思想:获取指定区域内的所有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}
调用方式为: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部分为:// new SectionCheckBoxSelector(chkContainer); // chkContainer为checkbox所在的容器
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>
<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源码下载
源码做了修改,使用了事件注册机制,解决了内存泄露问题