复选框(多选)选中事件

 1 <body>
 2     <form name="itemsForm" action="${pageContext.request.contextPath }/items/queryItems.action" method="post">
 3     查询条件:
 4         <table border="1" cellpadding="5" cellspacing="1" style="width: 100%">
 5             <tr>
 6                 <td style="width: 100px"><input type="text" name="itemsCustom.name"/></td>
 7                 <td align="left"><input type=button value="查询" onclick="queryItems();"/></td>
 8                 <td align="left"><input type="button" value="批量删除" onclick="deleteItems();"/></td>
 9             </tr>
10         </table>    
11     <br>
12     商品列表:
13     <c:if test="${empty itemsList }">
14         没有任何商品信息
15     </c:if>
16     <c:if test="${!empty itemsList }">
17         <table border="1" cellpadding="5" cellspacing="1" style="width: 100%">
18             <tr>
19                 <td style="width: 8%">选择:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
20                     <input type="checkbox" onclick="checkAll();"/>全选<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
21                     <input type="checkbox" onclick="inverse();"/>反选
22                 </td>
23                 <td style="width: 15%">商品名称</td>
24                 <td style="width: 15%">商品价格</td>
25                 <td style="width: 15%">生产日期</td>
26                 <td>商品描述</td>
27                 <td style="width: 10%">操作</td>
28             </tr>
29             <c:forEach items="${itemsList }" var="item">
30                 <tr> 
31                     <td><input type="checkbox" name="itemsId" value="${item.id}"/></td>
32                     <td>${item.name }</td>
33                     <td>${item.price }</td>
34                     <td><fmt:formatDate value="${item.createtime }" pattern="yyyy-MM-dd HH:mm:ss"/></td>
35                     <td>${item.detail }</td>
36                     <td><a href="${pageContext.request.contextPath }/items/editItems.action?id=${item.id}">修改</a></td>
37                 </tr>
38             </c:forEach>
39         </table>
40     </c:if>
41     </form>
42 </body>

js:

 1 <script type="text/javascript">
 2     
 3         // 全选事件
 4         function checkAll() {
 5             var itemsIdObj = document.all("itemsId");
 6              for (var i=0; i<itemsIdObj.length; i++) {
 7                  itemsIdObj[i].checked = true;    
 8              }
 9         }
10         // 反选事件
11         function inverse() {
12             var itemsIdObj = document.all("itemsId");
13              for (var i=0; i<itemsIdObj.length; i++) {
14                  itemsIdObj[i].checked = !itemsIdObj[i].checked;    // 复选框状态取反
15              }
16         }
17         
18         // 批量删除商品
19         function deleteItems() {  
20             var flag = $(".itemsId").is(':checked');    // 选中至少一个返回true, 都不选中返回false
21             if (flag) {
22                 if (confirm("您确定要删除所有选中的商品吗?")) {
23                     document.itemsForm.action = "${pageContext.request.contextPath }/items/deleteItems.action";
24                     document.itemsForm.submit();
25                 } 
26             } else {    // 如果用户不选中任何商品, 就不做任何动作
27                 alert("还未选中任何商品");
28                 return false;
29             }
30         }
31         
32         // 查询商品
33         function queryItems() {
34             document.itemsForm.action = "${pageContext.request.contextPath }/items/queryItems.action";
35             document.itemsForm.submit();
36         }
37     </script>

  

 

posted @ 2017-03-22 18:29  半生戎马,共话桑麻、  阅读(708)  评论(0)    收藏  举报
levels of contents