利用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>