以下是本人制作的全选/反选 组件，供广大同行参考、指正：
效果如图：
在实现的过程中，全选和全部取消选中这两个功能较为简单，只需用for循环遍历所有复选框为true或false即可。反选也较为简单，也是用for循环遍历一遍，把复选框的值设为当前状态的反向： obox[i].checked=!obox[i].checked; 。难点在于在全选状态下取消一个复选框，要自动识别为没有全选，随即更新全选状态为false。
<html>
<head>
<meta charset="utf-8">
<style>
body,div{margin: 0;padding: 0}
body{font: 16px/1.5 Tahoma;color: #fff;font-weight:bold;text-align: center;line-height: 28px}
#box{margin-top:100px;}
#box1{height: 320;width: 100px;margin: 0 auto;background: #9c3;border:4px solid #439C3A;border-radius: 6px;}
#box2{width: 100px;height: 300px；margin: 0 auto;}
.checkbox{width: 16px;height: 16px;}
label{font: 20px/1.5 Tahoma;font-weight: bold;line-height: 28px}
#all{width: 20px;height: 20px;}
button{background: #9c3;color: #fff;height: 28px;width: 60px;font:18px/1.5 Tahoma;line-height: 15px;border: 2px solid #439C3A; border-radius: 4px;font-weight:bold;cursor: pointer;}
</style>
</head>
<body>
<div id="box">
<div id="box1">
<label><b>全选</b></label><input type="checkbox" id="all"><br><hr>
<div id="box2">
事项1<input type="checkbox" class="checkbox"><br>
事项2<input type="checkbox" class="checkbox"><br>
事项3<input type="checkbox" class="checkbox"><br>
事项4<input type="checkbox" class="checkbox"><br>
事项5<input type="checkbox" class="checkbox"><br>
事项6<input type="checkbox" class="checkbox"><br>
事项7<input type="checkbox" class="checkbox"><br>
事项8<input type="checkbox" class="checkbox"><br>
<hr>
<button id="but1">反 选</button>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var oall=document.getElementById("all"); //获取“全选/取消”复选框
var obox=document.getElementById("box2").getElementsByTagName("input"); //获取各项复选框
var olabel=document.getElementsByTagName("label")[0]; //获取“label”用来更新显示 全选/取消
var obut=document.getElementById("but1"); //获取反选按钮<span style="font-family: Arial, Helvetica, sans-serif;"> </span>
obut.onclick=function() //反选
{
var count=0;
for(var i=0;i<obox.length;i++)
{
obox[i].checked=!obox[i].checked;
if(obox[i].checked)
{
count++;
}
}
oall.checked=count==obox.length?true:false;
olabel.innerHTML=oall.checked ? "取消":"全选";
};
</pre><pre name="code" class="html">
oall.onclick=function(){ //全选
for(var i=0;i<obox.length;i++){
obox[i].checked=this.checked;
}
olabel.innerHTML=oall.checked ? "取消":"全选";
};
</pre><pre name="code" class="html">
var n;
for(var i=0;i<obox.length;i++) //更新“全选/取消”
{
obox[i].onclick=function(){
n=0;
for(var j=0;j<obox.length;j++)
{
if(obox[j].checked)
{
n++;
}
}
oall.checked=n==obox.length?true:false;
olabel.innerHTML=oall.checked ? "取消":"全选";
};
}
</script>
</html>