jquery和js分別實現獲取checkbox的值+jquery實現複選框全選
阿新 • • 發佈:2018-12-25
//jquery實現全選 $(function(){ $("#checkAll").click(function(){ $(".checkOne").attr("checked",this.checked) }) }) //批量刪除jquery實現提示 function p_del(){ var valuelist = new Array(); $('input[name="checkOne"]:checked').each(function(){ valuelist.push($(this).val());//向陣列中新增元素 }); var ids=valuelist.join(',');//將陣列元素連線起來以構建一個字串 alert("選中的複選框的值"+ids+"-----"+valuelist); var id= $("input[name='checkOne']:checked").val();//只能獲取到首個checkOne的值 alert(id); //獲取選中數量 alert("選中的數量"+$("input[name='checkOne']:checked").length); } //批量刪除 js實現提示 function p_del() { var id = document.getElementsByName('checkOne'); var value = new Array(); for(var i = 0; i < id.length; i++){ if(id[i].checked) value.push(id[i].value); } //alert(value); var msg = "您確定要刪除這"+value.length+"條資料嗎?"; if (confirm(msg) == true) { return true; } else { return false; } } //------------------------------------------------------------------------ //jsp程式碼 <form action="${pageContext.request.contextPath }/DelByGroupServlet"> <table border="1"> <tr> <th><input id="checkAll" type="checkbox" name="checkAll"/></th> <td>銷售單號</td> <td>銷售商品名稱</td> <td>銷售員</td> <td>銷售數量</td> <td>銷售日期</td> <td colspan='2'>操作</td> </tr> <c:forEach items="${sell}" var="list"> <tr> <td><input type="checkbox" name="checkOne" value="${list.sid}" class="checkOne"/></td> <td>${list.sid}</td> <td>${list.product.name}</td> <td>${list.employee.name}</td> <td>${list.amount}</td> <td>${list.selldate}</td> <td><p> <a href="${pageContext.request.contextPath}/edit.jsp">編輯</a> </p></td> <td><p> <a href="${pageContext.request.contextPath}/DeleteSellServlet?id=${list.sid}" onclick="javascript:return del()">刪除</a> </p></td> </tr> </c:forEach> </table> <input type="submit" value="批量刪除" onclick="javascript:return p_del()"> </form>