javascript实现datagrid客户端checkbox列的全选,反选
2009-05-31 10:52
597 查看
最简格式：这是一个偷巧的方法，但不通用。前提是这个页面只有一个datagrid，且只有datagrid中有checkbox；这个就比较方便。主要思路就是搜索出整个页面的checkbox，将它们全部选中或反选。
// 全选
function allCheck()
{
for (var i=0;i<Form1.elements.length;i++)
{
var e=Form1.elements[i];
if (e.type=='checkbox')
e.checked=true;
}
}
//反选
function revCheck()
{
for (var i=0;i<Form1.elements.length;i++)
{
var e=Form1.elements[i];
if (e.type=='checkbox')
e.checked=!e.checked;
}
}
通用简单格式
因为asp.net页面中生成datagrid中的checkbox，他的ID是要改变的，所以我们寻找它们的规律，就可以准确的找到这个控件，从而进行全选和反选及选中的操作，
参数说明：
prefix：前缀；s：选择框ID；chk：选择框的ID；
function getObj( objID )
{
return document.getElementById( objID );
}
// 全选
function _SelectAll( prefix,s,chk )
{
var oArr = _GetColl( prefix,s,chk );
for( var o in oArr )
{
oArr[o].checked = true;
}
}
// 反选
function _RevSelect( prefix,s,chk )
{
var oArr = _GetColl( prefix,s,chk );
for( var o in oArr )
{
oArr[o].checked = !oArr[o].checked;
}
}
// 获值
function _GetColl( prefix,s,chk )
{
var i = s;
var oArr = new Array();
while( true)
{
var o = getObj( prefix + '__ctl' + i + '_' + chk);
if( o != null )
{
oArr.push( o );
}
else
{
break;
}
i++;
}
return oArr;
}
// 检查是否选中
function _CheckSelect( prefix,s,chk )
{
var oArr = _GetColl( prefix,s,chk );
for( var o in oArr )
{
if( oArr[o].checked)
{
return true;
}
}
return false;
}
推荐通用详细格式：http://www.cnblogs.com/ghd258/archive/2005/11/07/270449.html#Post
/* 分页
2
参数说明：
3
prefix：前缀；chkAll：全选框；chkSingle：单选框ID
4
5
使用方法：
6
if(e.Item.ItemType == ListItemType.Header)
7
{
8
((CheckBox)e.Item.Cells[1].FindControl("chkAll")).Attributes.Add("onclick","CheckAll('" + this.dg.ClientID.ToString() + "','chkAll','chkSingle');");
9
}
10
*/
11
function CheckAll(prefix,chkAll,chkSingle)
12
{
13
var indexChkAll;
14
if(prefix.length != 0)
15
{
16
indexChkAll = prefix + "__ctl2_" + chkAll;
17
}
18
else
19
{
20
indexChkAll = chkAll;
21
}
22
var objChkAll = document.getElementById(indexChkAll);
23
var tempObj;
24
for(var i=0;i<document.forms[0].elements.length;i++)
25
{
26
tempObj = document.forms[0].elements[i];
27
if(tempObj.type == "checkbox" && tempObj.id != indexChkAll && tempObj.id.indexOf(chkSingle) != -1)
28
{
29
tempObj.checked = objChkAll.checked;
30
}
31
}
32
}
33
/**//* 分页
34
参数说明：
35
prefix：前缀；chkAll：全选框；chkSingle：单选框ID
36
37
使用方法：
38
if(e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
39
{
40
((CheckBox)e.Item.Cells[1].FindControl("chkSingle")).Attributes.Add("onclick","CheckSingle('" + this.dg.ClientID.ToString() + "','chkAll','chkSingle');");
41
}
42
*/
43
function CheckSingle(prefix,chkAll,chkSingle)
44
{
45
var indexChkAll;
46
if(prefix.length != 0)
47
{
48
indexChkAll = prefix + "__ctl2_" + chkAll;
49
}
50
else
51
{
52
indexChkAll = chkAll;
53
}
54
var objChkAll = document.getElementById(indexChkAll);
55
var tempObj;
56
var allCount = 0;
57
var checkCount = 0;
58
for(var i=0;i<document.forms[0].elements.length;i++)
59
{
60
tempObj = document.forms[0].elements[i];
61
if(tempObj.type == "checkbox" && tempObj.id != indexChkAll && tempObj.id.indexOf(chkSingle) != -1)
62
{
63
if(tempObj.checked)
64
{
65
checkCount++;
66
}
67
else
68
{
69
objChkAll.checked = false;
70
//break;
71
}
72
allCount++;
73
}
74
}
75
if(checkCount != allCount)
76
{
77
objChkAll.checked = false;
78
}
79
else
80
{
81
if(allCount != 0)
82
{
83
objChkAll.checked = true;
84
}
85
}
86
}
87
/**//*
88
参数说明：
89
prefix：前缀；chkAll：全选框；chkSingle：单选框ID
90
type：1【全选】，2【反选】，3【取消】
91
92
使用方法：
93
this.btnSelectAll.Attributes.Add("onClick","CheckType('" + this.dg.ClientID.ToString() + "','chkAll','chkSingle',1);");
94
this.btnUnSelectAll.Attributes.Add("onClick","CheckType('" + this.dg.ClientID.ToString() + "','chkAll','chkSingle',2);");
95
this.btnCancelSelect.Attributes.Add("onClick","CheckType('" + this.dg.ClientID.ToString() + "','chkAll','chkSingle',3);");
96
*/
97
function CheckType(prefix,chkAll,chkSingle,type)
98
{
99
var indexChkAll;
100
if(prefix.length != 0)
101
{
102
indexChkAll = prefix + "__ctl2_" + chkAll;
103
}
104
else
105
{
106
indexChkAll = chkAll;
107
}
108
var objChkAll = document.getElementById(indexChkAll);
109
var tempObj;
110
var allCount = 0;
111
var checkCount = 0;
112
for(var i=0;i<document.forms[0].elements.length;i++)
113
{
114
tempObj = document.forms[0].elements[i];
115
if(tempObj.type == "checkbox" && tempObj.id != indexChkAll && tempObj.id.indexOf(chkSingle) != -1)
116
{
117
switch(type)
118
{
119
case 1:
120
tempObj.checked = true;
121
break;
122
case 2:
123
tempObj.checked = !tempObj.checked;
124
break;
125
case 3:
126
tempObj.checked = false;
127
break;
128
}
129
if(tempObj.checked)
130
{
131
checkCount++;
132
}
133
allCount++;
134
}
135
}
136
if(checkCount != allCount)
137
{
138
objChkAll.checked = false;
139
}
140
else
141
{
142
if(allCount != 0)
143
{
144
objChkAll.checked = true;
145
}
146
}
147
window.event.returnValue = false;
148
return false;
149
}
150
151
/**//*
152
参数说明：
153
prefix：前缀；chkAll：全选框；chkSingle：单选框ID
154
155
使用方法：
156
this.btnDelete.Attributes.Add("onClick","SubmitCheckBox('" + this.dg.ClientID.ToString() + "','chkAll','chkSingle');");
157
*/
158
function SubmitCheckBox(prefix,chkAll,chkSingle,msg)
159
{
160
var indexChkAll;
161
if(prefix.length != 0)
162
{
163
indexChkAll = prefix + "__ctl2_" + chkAll;
164
}
165
else
166
{
167
indexChkAll = chkAll;
168
}
169
var objChkAll = document.getElementById(indexChkAll);
170
171
var tempObj;
172
var allCount = 0;
173
var checkCount = 0;
174
for(var i=0;i<document.forms[0].elements.length;i++)
175
{
176
tempObj = document.forms[0].elements[i];
177
if(tempObj.type == "checkbox" && tempObj.id != indexChkAll && tempObj.id.indexOf(chkSingle) != -1)
178
{
179
if(tempObj.checked)
180
{
181
checkCount++;
182
}
183
allCount++;
184
}
185
}
186
if(allCount == 0) //没有数据
187
{
188
window.alert("当前没有" + msg + "可供删除
");
189
window.event.returnValue = false;
190
return false;
191
}
192
else
193
{
194
if(checkCount == 0)
195
{
196
window.alert("没有选中要删除的" + msg + "
");
197
window.event.returnValue = false;
198
return false;
199
}
200
else
201
{
202
//if(window.confirm("确定要删除当前选中的【" + checkCount.toString() + "】项吗？") == false)
203
if(window.confirm("确定要删除当前选中的" + msg + "吗？") == false)
204
{
205
window.event.returnValue = false;
206
return false;
207
}
208
}
209
}
210
}
// 全选
function allCheck()
{
for (var i=0;i<Form1.elements.length;i++)
{
var e=Form1.elements[i];
if (e.type=='checkbox')
e.checked=true;
}
}
//反选
function revCheck()
{
for (var i=0;i<Form1.elements.length;i++)
{
var e=Form1.elements[i];
if (e.type=='checkbox')
e.checked=!e.checked;
}
}
通用简单格式
因为asp.net页面中生成datagrid中的checkbox，他的ID是要改变的，所以我们寻找它们的规律，就可以准确的找到这个控件，从而进行全选和反选及选中的操作，
参数说明：
prefix：前缀；s：选择框ID；chk：选择框的ID；
function getObj( objID )
{
return document.getElementById( objID );
}
// 全选
function _SelectAll( prefix,s,chk )
{
var oArr = _GetColl( prefix,s,chk );
for( var o in oArr )
{
oArr[o].checked = true;
}
}
// 反选
function _RevSelect( prefix,s,chk )
{
var oArr = _GetColl( prefix,s,chk );
for( var o in oArr )
{
oArr[o].checked = !oArr[o].checked;
}
}
// 获值
function _GetColl( prefix,s,chk )
{
var i = s;
var oArr = new Array();
while( true)
{
var o = getObj( prefix + '__ctl' + i + '_' + chk);
if( o != null )
{
oArr.push( o );
}
else
{
break;
}
i++;
}
return oArr;
}
// 检查是否选中
function _CheckSelect( prefix,s,chk )
{
var oArr = _GetColl( prefix,s,chk );
for( var o in oArr )
{
if( oArr[o].checked)
{
return true;
}
}
return false;
}
推荐通用详细格式：http://www.cnblogs.com/ghd258/archive/2005/11/07/270449.html#Post
/* 分页
2
参数说明：
3
prefix：前缀；chkAll：全选框；chkSingle：单选框ID
4
5
使用方法：
6
if(e.Item.ItemType == ListItemType.Header)
7
{
8
((CheckBox)e.Item.Cells[1].FindControl("chkAll")).Attributes.Add("onclick","CheckAll('" + this.dg.ClientID.ToString() + "','chkAll','chkSingle');");
9
}
10
*/
11
function CheckAll(prefix,chkAll,chkSingle)
12
{
13
var indexChkAll;
14
if(prefix.length != 0)
15
{
16
indexChkAll = prefix + "__ctl2_" + chkAll;
17
}
18
else
19
{
20
indexChkAll = chkAll;
21
}
22
var objChkAll = document.getElementById(indexChkAll);
23
var tempObj;
24
for(var i=0;i<document.forms[0].elements.length;i++)
25
{
26
tempObj = document.forms[0].elements[i];
27
if(tempObj.type == "checkbox" && tempObj.id != indexChkAll && tempObj.id.indexOf(chkSingle) != -1)
28
{
29
tempObj.checked = objChkAll.checked;
30
}
31
}
32
}
33
/**//* 分页
34
参数说明：
35
prefix：前缀；chkAll：全选框；chkSingle：单选框ID
36
37
使用方法：
38
if(e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
39
{
40
((CheckBox)e.Item.Cells[1].FindControl("chkSingle")).Attributes.Add("onclick","CheckSingle('" + this.dg.ClientID.ToString() + "','chkAll','chkSingle');");
41
}
42
*/
43
function CheckSingle(prefix,chkAll,chkSingle)
44
{
45
var indexChkAll;
46
if(prefix.length != 0)
47
{
48
indexChkAll = prefix + "__ctl2_" + chkAll;
49
}
50
else
51
{
52
indexChkAll = chkAll;
53
}
54
var objChkAll = document.getElementById(indexChkAll);
55
var tempObj;
56
var allCount = 0;
57
var checkCount = 0;
58
for(var i=0;i<document.forms[0].elements.length;i++)
59
{
60
tempObj = document.forms[0].elements[i];
61
if(tempObj.type == "checkbox" && tempObj.id != indexChkAll && tempObj.id.indexOf(chkSingle) != -1)
62
{
63
if(tempObj.checked)
64
{
65
checkCount++;
66
}
67
else
68
{
69
objChkAll.checked = false;
70
//break;
71
}
72
allCount++;
73
}
74
}
75
if(checkCount != allCount)
76
{
77
objChkAll.checked = false;
78
}
79
else
80
{
81
if(allCount != 0)
82
{
83
objChkAll.checked = true;
84
}
85
}
86
}
87
/**//*
88
参数说明：
89
prefix：前缀；chkAll：全选框；chkSingle：单选框ID
90
type：1【全选】，2【反选】，3【取消】
91
92
使用方法：
93
this.btnSelectAll.Attributes.Add("onClick","CheckType('" + this.dg.ClientID.ToString() + "','chkAll','chkSingle',1);");
94
this.btnUnSelectAll.Attributes.Add("onClick","CheckType('" + this.dg.ClientID.ToString() + "','chkAll','chkSingle',2);");
95
this.btnCancelSelect.Attributes.Add("onClick","CheckType('" + this.dg.ClientID.ToString() + "','chkAll','chkSingle',3);");
96
*/
97
function CheckType(prefix,chkAll,chkSingle,type)
98
{
99
var indexChkAll;
100
if(prefix.length != 0)
101
{
102
indexChkAll = prefix + "__ctl2_" + chkAll;
103
}
104
else
105
{
106
indexChkAll = chkAll;
107
}
108
var objChkAll = document.getElementById(indexChkAll);
109
var tempObj;
110
var allCount = 0;
111
var checkCount = 0;
112
for(var i=0;i<document.forms[0].elements.length;i++)
113
{
114
tempObj = document.forms[0].elements[i];
115
if(tempObj.type == "checkbox" && tempObj.id != indexChkAll && tempObj.id.indexOf(chkSingle) != -1)
116
{
117
switch(type)
118
{
119
case 1:
120
tempObj.checked = true;
121
break;
122
case 2:
123
tempObj.checked = !tempObj.checked;
124
break;
125
case 3:
126
tempObj.checked = false;
127
break;
128
}
129
if(tempObj.checked)
130
{
131
checkCount++;
132
}
133
allCount++;
134
}
135
}
136
if(checkCount != allCount)
137
{
138
objChkAll.checked = false;
139
}
140
else
141
{
142
if(allCount != 0)
143
{
144
objChkAll.checked = true;
145
}
146
}
147
window.event.returnValue = false;
148
return false;
149
}
150
151
/**//*
152
参数说明：
153
prefix：前缀；chkAll：全选框；chkSingle：单选框ID
154
155
使用方法：
156
this.btnDelete.Attributes.Add("onClick","SubmitCheckBox('" + this.dg.ClientID.ToString() + "','chkAll','chkSingle');");
157
*/
158
function SubmitCheckBox(prefix,chkAll,chkSingle,msg)
159
{
160
var indexChkAll;
161
if(prefix.length != 0)
162
{
163
indexChkAll = prefix + "__ctl2_" + chkAll;
164
}
165
else
166
{
167
indexChkAll = chkAll;
168
}
169
var objChkAll = document.getElementById(indexChkAll);
170
171
var tempObj;
172
var allCount = 0;
173
var checkCount = 0;
174
for(var i=0;i<document.forms[0].elements.length;i++)
175
{
176
tempObj = document.forms[0].elements[i];
177
if(tempObj.type == "checkbox" && tempObj.id != indexChkAll && tempObj.id.indexOf(chkSingle) != -1)
178
{
179
if(tempObj.checked)
180
{
181
checkCount++;
182
}
183
allCount++;
184
}
185
}
186
if(allCount == 0) //没有数据
187
{
188
window.alert("当前没有" + msg + "可供删除
");
189
window.event.returnValue = false;
190
return false;
191
}
192
else
193
{
194
if(checkCount == 0)
195
{
196
window.alert("没有选中要删除的" + msg + "
");
197
window.event.returnValue = false;
198
return false;
199
}
200
else
201
{
202
//if(window.confirm("确定要删除当前选中的【" + checkCount.toString() + "】项吗？") == false)
203
if(window.confirm("确定要删除当前选中的" + msg + "吗？") == false)
204
{
205
window.event.returnValue = false;
206
return false;
207
}
208
}
209
}
210
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javascript实现datagrid客户端checkbox列的全选,反选
- javascript实现datagrid客户端checkbox列的全选,反选
- javascript实现datagrid客户端checkbox列的全选,反选
- javascript实现datagrid客户端checkbox列的全选,反选
- javascript实现datagrid客户端checkbox列的全选,反选
- javascript实现datagrid客户端checkbox列的全选,反选
- javascript实现datagrid客户端checkbox列的全选,反选
- javascript实现datagrid客户端checkbox列的全选,反选
- JavaScript实现DataGrid中添加CheckBox列(全选与否)
- 用Javascript在客户端实现遍历datagrid,DataList控件,像MSN中的全选
- JavaScript实现DataGrid中的CheckBox全选与否
- 用javascript实现DataGrid CheckBox类似于HotMail 全选
- [导入]JavaScript实现DataGrid中添加CheckBox列(全选与否)
- JavaScript实现DataGrid中添加CheckBox列(全选与否)
- 用javascript实现DataGrid CheckBox类似于HotMail 全选
- JavaScript实现DataGrid中添加CheckBox列(全选与否)
- JavaScript实现DataGrid中添加CheckBox列(全选与否)
- Javascript实现在DataGrid上的CheckBox全选和取消
- JavaScript实现DataGrid中的CheckBox全选与否
- 用Javascript在客户端实现遍历datagrid,DataList控件,像MSN中的全选