版权声明：署名，允许他人基于本文进行创作，且必须基于与原先许可协议相同的许可协议分发本文 （Creative Commons）
在我们之前的案例中，在list.jsp，查看商品的表格中是没有全选按钮的，我们删除图书，只能一个一个删除，如果考虑到批量删除呢，所以我们需要新增全选/全不选按钮。
1.需求
需要像红圈那样添加勾选按钮，点击全选，或者批量勾选，我们可以同时删除多本书籍。
2.添加全选思路分析
我们先利用前端知识，给商品编号前面添加一列，控件的type类型为checkbox.
打开list.jsp，大概在117行到120行之间，在商品编号前面添加一栏，标题是全选和全不选
<td align="center" width="10%"><input type="checkbox" id="checkAll"/>全选/全不选</td>
<td align="center" width="24%">商品编号</td>然后在130行附近，在id这行上面添加checkbox
<td style="CURSOR: hand; HEIGHT: 22px" align="center"
width="23"><input type="checkbox" name="ids"/></td>
<td style="CURSOR: hand; HEIGHT: 22px" align="center"
width="23">${b.id}</td>刷新浏览器，这个时候checkbox的效果出来了
接下来就是如何设置，表格中每行前面的checkbox如何和表头中全选/全不选中checkbox的状态一直。checkbox有两个状态，一个勾选，一个是不勾选。
接下来的思路是
- 写一个checkAll()方法
- 获取表头中checkAll这个checkbox元素
- 获取所有复选框元素ids
- 循环每一个复选框，并给其赋值，值和checkAll元素的状态值是一致。
- 利用点击事件调用chekAll()方法
3.代码实现
主要的方法代码如下
function checkAllItem(){
//得到checkAll这个元素，并拿到状态值
var flag = document.getElementById("checkAll").checked;
//得到表格中每行的ids元素数组
var eles = document.getElementsByName("ids");
//遍历每个元素并赋值，checkbox的状态
for(var i=0; i<eles.length; i++){
eles[i].checked = flag;
}
}然后在表头的checkbox那个元素中，onclick="调用这个方法"，全部list.jsp代码如下
<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<HTML>
<HEAD>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="${pageContext.request.contextPath}/admin/css/Style.css"
rel="stylesheet" type="text/css" />
<script language="javascript"
src="${pageContext.request.contextPath}/admin/js/public.js"></script>
<script type="text/javascript">
function addProduct() {
window.location.href = "${pageContext.request.contextPath}/admin/products/add.jsp";
}
function delBook(id){
if(confirm("是否确定删除图书？"+id)){
location.href="${pageContext.request.contextPath}/delBookServlet?id=" + id;
}
}
function checkAllItem(){
//得到checkAll这个元素，并拿到状态值
var flag = document.getElementById("checkAll").checked;
//得到表格中每行的ids元素数组
var eles = document.getElementsByName("ids");
//遍历每个元素并赋值，checkbox的状态
for(var i=0; i<eles.length; i++){
eles[i].checked = flag;
}
}
</script>
</HEAD>
<body>
<br>
<form id="Form1" name="Form1"
action="${pageContext.request.contextPath}/bookListServlet"
method="post">
<table cellSpacing="1" cellPadding="0" width="100%" align="center"
bgColor="#f5fafe" border="0">
<TBODY>
<tr>
<td class="ta_01" align="center" bgColor="#afd1f3"><strong>查
询 条 件</strong>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td height="22" align="center" bgColor="#f5fafe" class="ta_01">
商品编号</td>
<td class="ta_01" bgColor="#ffffff"><input type="text"
name="id" size="15" value="" id="Form1_userName" class="bg" />
</td>
<td height="22" align="center" bgColor="#f5fafe" class="ta_01">
类别：</td>
<td class="ta_01" bgColor="#ffffff"><select name="category"
id="category">
<option value="" selected="selected">--选择商品类加--</option>
<option value="文学">文学</option>
<option value="生活">生活</option>
<option value="计算机">计算机</option>
<option value="外语">外语</option>
<option value="经营">经营</option>
<option value="励志">励志</option>
<option value="社科">社科</option>
<option value="学术">学术</option>
<option value="少儿">少儿</option>
<option value="艺术">艺术</option>
<option value="原版">原版</option>
<option value="科技">科技</option>
<option value="考试">考试</option>
<option value="生活百科">生活百科</option>
</select></td>
</tr>
<tr>
<td height="22" align="center" bgColor="#f5fafe" class="ta_01">
商品名称：</td>
<td class="ta_01" bgColor="#ffffff"><input type="text"
name="name" size="15" value="" id="Form1_userName" class="bg" />
</td>
<td height="22" align="center" bgColor="#f5fafe" class="ta_01">
价格区间(元)：</td>
<td class="ta_01" bgColor="#ffffff"><input type="text"
name="minprice" size="10" value="" />- <input type="text"
name="maxprice" size="10" value="" /></td>
</tr>
<tr>
<td width="100" height="22" align="center" bgColor="#f5fafe"
class="ta_01"></td>
<td class="ta_01" bgColor="#ffffff"><font face="宋体"
color="red"> </font>
</td>
<td align="right" bgColor="#ffffff" class="ta_01"><br>
<br></td>
<td align="right" bgColor="#ffffff" class="ta_01">
<button type="submit" id="search" name="search"
value="查询" class="button_view">
查询</button> <input
type="reset" name="reset" value="重置"
class="button_view" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="ta_01" align="center" bgColor="#afd1f3"><strong>商品列表</strong>
</TD>
</tr>
<tr>
<td class="ta_01" align="right">
<button type="button" id="add" name="add" value="添加"
class="button_add" onclick="addProduct()">添加
</button>
</td>
</tr>
<tr>
<td class="ta_01" align="center" bgColor="#f5fafe">
<table cellspacing="0" cellpadding="1" rules="all"
bordercolor="gray" border="1" id="DataGrid1"
style="BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; BORDER-LEFT: gray 1px solid; WIDTH: 100%; WORD-BREAK: break-all; BORDER-BOTTOM: gray 1px solid; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #f5fafe; WORD-WRAP: break-word">
<tr
style="FONT-WEIGHT: bold; FONT-SIZE: 12pt; HEIGHT: 25px; BACKGROUND-COLOR: #afd1f3">
<td align="center" width="10%"><input type="checkbox" id="checkAll" onclick="checkAllItem()"/>全选/全不选</td>
<td align="center" width="24%">商品编号</td>
<td align="center" width="18%">商品名称</td>
<td align="center" width="9%">商品价格</td>
<td align="center" width="9%">商品数量</td>
<td width="8%" align="center">商品类别</td>
<td width="8%" align="center">编辑</td>
<td width="8%" align="center">删除</td>
</tr>
<c:forEach items="${books }" var="b">
<tr onmouseover="this.style.backgroundColor = 'white'"
onmouseout="this.style.backgroundColor = '#F5FAFE';">
<td style="CURSOR: hand; HEIGHT: 22px" align="center"
width="23"><input type="checkbox" name="ids"/></td>
<td style="CURSOR: hand; HEIGHT: 22px" align="center"
width="23">${b.id}</td>
<td style="CURSOR: hand; HEIGHT: 22px" align="center"
width="18%">${b.name}</td>
<td style="CURSOR: hand; HEIGHT: 22px" align="center"
width="8%">${b.price}</td>
<td style="CURSOR: hand; HEIGHT: 22px" align="center"
width="8%">${b.pnum}</td>
<td style="CURSOR: hand; HEIGHT: 22px" align="center">${b.category}</td>
<td align="center" style="HEIGHT: 22px" width="7%"><a
href="${pageContext.request.contextPath}/findBookByIdServlet?id=${b.id}">
<img
src="${pageContext.request.contextPath}/admin/images/i_edit.gif"
border="0" style="CURSOR: hand"> </a>
</td>
<td align="center" style="HEIGHT: 22px" width="7%"><a
href="javascript:delBook('${b.id }')">
<img
src="${pageContext.request.contextPath}/admin/images/i_del.gif"
width="16" height="16" border="0" style="CURSOR: hand">
</a>
</td>
</tr>
</c:forEach>
</table>
</td>
</tr>
</TBODY>
</table>
</form>
</body>
</HTML>
效果如下
