javascript实现datagrid客户端checkbox列的全选,反选_javascript教程教程_H5之家

最简格式：这是一个偷巧的方法，但不通用。前提是这个页面只有一个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;

}

推荐通用详细格式：#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}