爱华网一般在网站的管理后台应用此功能居多，如一次性处理多个产品，或对文章的删除对产品的下架等处理，一条一条的点显然有一些麻烦，如果能每一行放一个checkbox，然后统一处理就好办的多了，固然在asp.net中有后台的检索办法，但是总是对页面进行刷新感觉很不友好，如果能用js来处理，使页面不刷新就能完成对checkbox全选或全不选的功能，且得到信息的key值，那就完美的多了，今天我就用简单的篇幅来讲解一下这个功能的实现原理和实现过程。
js实现checkbox全选，全不选详解――工具/原料记事本或任何网页编辑工具
Dreamweaver或任何javascript编写工具
js实现checkbox全选，全不选详解――步骤/方法js实现checkbox全选，全不选详解 1、
在网页中，如果想获得一个网页元素的对象，我们一般用formName.元素id的办法，有的时候也用getelementbyid或getelementbyName的办法，我们都知道，网页的最上层是一个document，也就是说我们可以通过document这个对象可以得到一个完整的页面元素列表。
OK，那么我们如何来获得网页所有元素呢，其实只需要通过这个指令就可以了：document.all
但是现在问题出现了，我们要获得的是页面中所有的checkbox，而其它的元素则不需要，有了这样的需求，我们就可以构造出如下的代码：
for(var i=0;i<document.all.length;i++)
{
if (document.all(i).type=="checkbox")
{
//对checkbox进行处理
}
}
这里需要讲解一点的是我们通过document.all.length得到了页面中所有元素的列表的长 度，然后再循环这个列表找出checkbox的元素，代码中我们用了document.all(i).type来判断是不是checkbox，type得到的就是这个元素的类型，通过这个办法我们还可以得到页面中所有的div或table，按钮等等类别的列表。
js实现checkbox全选，全不选详解 2、
OK，下面我们就要构造处理代码了，我们获得到了所有的checkbox，那么如何来进行全选和全不选的操作呢，代码很简单：
既然是checkbox那么就应该有checked属性了，我们只需要这样做就可以了。
document.all(i).checked=true;（学过c#或java的可能潜意识里认为这里少了一个类型的转化，在js里这样是可以的。js是基于对象的，并不是完全的面向对象。）
如果让这个checkbox取消选择呢，只需要document.all(i).checked=false;就OK了。
js实现checkbox全选，全不选详解 3、
现在我们先不慌来构造这个函数，因为我们还差一个功能没有实现，那就是反选功能，选择只需要把checked赋值为true，取消选择就是false，那么反选应该如何来实现呢，其实我们只需要再加一个if来判断这个控制当前的状态就可以了，代码如下：
if(document.all(i).checked==true)
{
document.all(i).checked=false;
}
else
{
document.all(i).checked=true;
}
js实现checkbox全选，全不选详解 4、
好了，我们现在来构造一下这个函数，代码如下：
function checkAllaction(obj)
{
for(var i=0;i<document.all.length;i++)
{
if (document.all(i).type=="checkbox")
{
switch(obj)
{
case 1:document.all(i).checked=true;
break; //全选
case 2:document.all(i).checked=false;
break; //不选
case 3:
{
if(document.all(i).checked==true)
{
document.all(i).checked=false;
}
else
{
document.all(i).checked=true;
}
}
break; //反选
}
}
}
}
代码讲解：函数中用到一个switch，有程序基础的人都懂这玩意是干什么用的，我就不解释基本用法了，当参数传为1的时候将checkbox全选，当参数传2的时候所有全不选，传3的时候就是反选。
到这里我们似乎就完成了js对checkbox的全选和全不选功能了。
js实现checkbox全选，全不选详解 5、
页面中按钮触发事件非常简单，代码如下：
<input onClick="checkAll(1)" type="button" value="全选">
<input onClick="checkAll(2)" type="button" value="全不选">
<input onClick="checkAll(3)" type="button" value="反选">
js实现checkbox全选，全不选详解 6、
但是您注意到了，我上面的贴图中，并没有全选，全不选功能，因为经过长时间观察我发现，全选和全不选功能完全没有必要，只要一个反选功能就可以替代了，当一个选择没有的时候点击反选就是全选，想全不选就再refresh一下页面就好了，当然这个属于个人偏好，代码就是上面的那些了，看你怎么用着方便吧。
js实现checkbox全选，全不选详解 7、
最后要说明一点的是，当选择完之后如何获得key值呢，其实我们只需要在点击处理按钮的时候再次循环判断是否被选中然后获得到该控件的value值就可以了，如我现在要批量删除：
function Delete() //删除
{
var m=0;
flag=false;
var str="";
for(i=0;i<document.all.length;i++)
{
if(document.all(i).type=="checkbox" && document.all(i).checked==true)
{
str+=document.all(i).value+",";
flag=true;
m++;
}
}
if(!flag)
{
alert("你没有选中任何数据");
return false ;
}
if(confirm('您确定要删除以上'+m+'条信息吗？'))
{
location.href="?action=del&idlist="+str;
}
else
{
return false;
}
}
点击之后会向本页面传递一个action，判断是否为del，然后得到id的list列表用逗号分割，再用split切割处理就可以了，关于split的用法，请参考我的这篇文章：
http://jingyan.baidu.com/article/09ea3edecc65a1c0aede3983.html
js实现checkbox全选，全不选详解――注意事项由于js很难调试，切无明显错误提示，所以请耐心调试，可以逐步增加alert来跟踪调试
