复选框(多选)选中事件
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> 20 <input type="checkbox" onclick="checkAll();"/>全选<br> 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>