比较完美的全选与反选

利用JS实现了一个完美的全选与反选的功能：

1. jsp页面中的商品列表表格

    <table width="500px" border="1" id="t">  
<tr>
<th>
<input type="checkbox" id="all" οnclick="allselect(this)">全选
</th><th>商品名称</th>
<th>商品价格</th><th>数量</th>
</tr>  
<tr>
<td><input type="checkbox" οnclick="cl()" name="ab"></td><td>毛巾</td>
<td>10</td><td>2</td>
</tr>
<tr>
<td><input type="checkbox" οnclick="cl()" name="ab"></td><td>沐浴露</td>
<td>30</td><td>1</td>
</tr>
<tr>
<td><input type="checkbox" οnclick="cl()" name="ab"></td><td>洗发水</td>
<td>26</td><td>1</td>
</tr>
<tr>
<td><input type="checkbox" οnclick="cl()" name="ab"></td><td>牙膏</td>
<td>14</td><td>1</td>
</tr>
<tr>
<td><input type="checkbox" οnclick="cl()" name="ab"></td><td>牙刷</td>
<td>6</td><td>1</td>
</tr>  
</table>

2. Js脚本编写

   <script>
function allselect(a){
  //取所有的input标签的元素
  var item = document.getElementsByTagName("input");
  //循环所有的元素
  for(var i=0;i<item.length;i++){
     //判断是否是一个复选框
  if(item[i].type=="checkbox"){
  item[i].checked = a.checked;
  }
  }
}
function cl(){
var item = document.getElementsByName("ab");
var b=true;  //标记
for(var i=0;i<item.length;i++){  //循环所有项的复选框
if(item[i].checked==false){  //只要其中某一个不选中
b=false;   //更改标记
break;   //提前退出循环
}
}
//控制全选的复选框
document.getElementById("all").checked=b;
}

        </script>