开发学院网页设计 JavaScript javascript实现datagrid客户端checkbox列的全选,反... 阅读

javascript实现datagrid客户端checkbox列的全选,反选

　2006-12-19 19:57:10　来源：WEB开发网　　　

核心提示：最简格式：这是一个偷巧的方法，但不通用，javascript实现datagrid客户端checkbox列的全选,反选，前提是这个页面只有一个datagrid，且只有datagrid中有checkbox；这个就比较方便，从而进行全选和反选及选中的操作，参数说明：PRefix：前缀；s：选择框ID；chk：选择框的ID；

最简格式：这是一个偷巧的方法，但不通用。前提是这个页面只有一个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*/
11function 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*/
43function 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*/
97function 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*/
158function 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}