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

最简格式:这是一个偷巧的方法,但不通用。前提是这个页面只有一个datagrid,且只有datagrid中有checkbox;这个就比较方便。主要思路就是搜索出整个页面的checkbox,将它们全部选中或反选。
// 全选
function allCheck()
{
for (var i=0;i<Form1.elements.length;i  )
{
var e=Form1.elements;
if (e.type=='checkbox')
e.checked=true;

}
//反选
function revCheck()
{
for (var i=0;i<Form1.elements.length;i  )
{
var e=Form1.elements;
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;
27        if(tempObj.type == "checkbox" &;amp;&;amp; tempObj.id != indexChkAll &;amp;&;amp; 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;
61        if(tempObj.type == "checkbox" &;amp;&;amp; tempObj.id != indexChkAll &;amp;&;amp; 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;
115        if(tempObj.type == "checkbox" &;amp;&;amp; tempObj.id != indexChkAll &;amp;&;amp; 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;
177        if(tempObj.type == "checkbox" &;amp;&;amp; tempObj.id != indexChkAll &;amp;&;amp; 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} 


http://www.cnblogs.com/skylaugh/archive/2006/12/18/596098.html

 感谢原创者的辛勤劳动,希望对您有所帮助,转载请注明原出处。
 您可能对 [javascript] 的这些文章也感兴趣:

调试javascript的好方法
用javascrpt实现淘宝首页的间隔性滚动效果
javascript中id和name的区别
arp病毒利用的Javascript技术
用javascript实现(页面正在加载的效果)
判断数字的正则表达式
JavaScript Function Outliner插件(第四版)
JavaScript多线程编程简介
Javascript模拟的DOS窗口
用JavaScript实现页面百叶窗效果