多选框全选和取消全选
<%--
Created by IntelliJ IDEA.
User: Mr.Xue
Date: 2017/9/17
Time: 13:50
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<title>购物车</title>
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
//单个删除
function del(dels) {
$.ajax({
type:"post",
url:"${pageContext.request.contextPath }/phone/deleteShopCar.action",//需要用来处理ajax请求的action
data:{//设置数据源
ids:dels
},
dataType:"json",//设置需要返回的数据类型
success:function(data){
var count = data.count;
if(count == 1)
{
alert("删除成功");
$("#tr"+dels).remove();
// $(":checkbox").removeAttr("checked");
// $("#content").val("");
}else{
alert("删除失败");
}
},
error:function(){
alert("系统异常，请稍后重试！");
}
});
};
// 购买
function buy(dels) {
$.ajax({
type:"post",
url:"${pageContext.request.contextPath }/phone/buyPhone.action",//需要用来处理ajax请求的action
data:{//设置数据源
ids:dels
},
dataType:"json",//设置需要返回的数据类型
success:function(data){
var count = data.count;
if(count == 1)
{
alert("购买成功");
// $(":checkbox").removeAttr("checked");
// $("#content").val("");
}
else if(count==2){
alert("余额不足");
}else
{
alert("购买失败");
}
},
error:function(){
alert("系统异常，请稍后重试！");
}
});
};
$(function () {
//批量删除
$("#plsc").click(function () {
var delIds="";
$("input[type=checkbox]:gt(0):checked").each(function() { // 遍历选中的checkbox
delIds+=$(this).val(); // 获取checkbox所在行的顺序
});
$.ajax({
type:"post",
url:"${pageContext.request.contextPath }/phone/deleteShopCarAll.action",//需要用来处理ajax请求的action
data:{//设置数据源
ids:delIds
},
dataType:"json",//设置需要返回的数据类型
success:function(data){
var count = data.count;
if(count == 1)
{
alert("删除成功");
$("input[type=checkbox]:gt(0):checked").each(function() { // 遍历选中的checkbox
$("#tr"+$(this).val()).remove();
});
}
else
{
alert("删除失败");
}
},
error:function(){
alert("系统异常，请稍后重试！");
}
});
});
//全选全不选
$("#che").click(function() {
if($(this).is(":checked")){
$('input[type=checkbox]:gt(0)').attr("checked",true);
}else{
$('input[type=checkbox]:gt(0)').attr("checked",false);
}
});
});
</script>
</head>
<body>
<center>
<h1>我的购物车</h1>
<%--查询表格--%>
<table border="1">
<tr>
<td><input type="checkbox" id="che"></td>
<td>id</td>
<td>品牌</td>
<td>价格</td>
<td>数量</td>
<td>图片</td>
<td><input type="button" value="批量删除" id="plsc"></td>
</tr>
<c:forEach items="${phones }" var="phone">
<tr id="tr${phone.id}">
<td><input type="checkbox" value="${phone.id}"></td>
<td>${phone.id }</td>
<td>${phone.brank }</td>
<td>${phone.price }</td>
<td>${phone.number }</td>
<td></td>
<td><input type="button" value="删除" onclick="del(${phone.id})">
<input type="button" value="购买" onclick="buy(${phone.id})"></td>
</tr>
</c:forEach>
</table>
</center>
</body>
</html>
