利用简单的JavaScript实现购物车的全选、反选功能,并能自动计算选择的个数与商品总价。
兼容大多浏览器,包括IE、火狐、谷歌。
<%@ page contentType="text/html;charset=UTF-8" language="java">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<title>购物车</title>
<link rel="stylesheet" href="../style.css" type="text/css" />
<script type="text/javascript">
function allSelect()
{
var checkObj = document.getElementsByName("checkbox");
for(var i = 0;i<checkObj.length;i++)
{
checkObj[i].checked = true;
}
}
function reverseSelect()
{
var checkObj = document.getElementsByName("checkbox");
for(var i = 0;i<checkObj.length;i++)
{
if(checkObj[i].checked == true)
checkObj[i].checked = false;
else if(checkObj[i].checked==false)
checkObj[i].checked = true;
}
}
//计算所选商品的件数和总金额
function getprice(f)
{
n =0;
m =0.0;
var checks2 = document.getElementsByName("checkbox");
for(j=0;j<checks2.length;j++)
{
if(checks2[j].checked)
{
var mytable = parseFloat(document.getElementById("mytable").rows[j+1].cells[3].innerHTML);
m+=mytable;
n++;
}
}
f.totalprice.value=m;
f.num.value=n;
}
window.onload=function(){
var oAll=document.getElementById(
var oReverse=document.getElementById(
oAll.onclick=function(){
allSelect();
getprice(this.form);
};
oReverse.onclick=function(){
reverseSelect();
getprice(this.form);
};
};
</script>
</head>
<body>
<div>
<form action="../admin/tsz/dobuy.jsp" method="post">
<table border="1" align="center"width="100%" height="5%" id="mytable" >
<tr align="center">
<td width=
<td width="100">商品缩图</td>
<td width="100">商品名称</td>
<td width="100">价格</td>
<td width="100">编辑</td>
</tr>
<%
int dangqianye = (Integer)session.getAttribute("shoppage");//当前页数
int zongye = (Integer)session.getAttribute("shopcount");//总页数
ArrayList cart =new ArrayList();
cart=(ArrayList)session.getAttribute("pagearray");
System.out.println(cart.size());
System.out.println("sdhfshf");
for(int i=0;i<cart.size();i++){
//int infoId =(Integer)session.getAttribute("infoId");
Cart aa = new Cart();
aa = (Cart)cart.get(i);
int infoid=aa.getinfoId();
orderImpl cartimpl=new orderImpl();
String name=cartimpl.search1(infoid);
%>
<tr>
<td align="center" height="5%" ><input type="checkbox" name="checkbox" value="<%=aa.getinfoId()%>" onclick="getprice(this.form)"></td>
<td align="center" height="5%"><img src="../images/carImages/<%=name%>" style="width: 100px; height: 100px;"> </td>
<td align="center" height="5%" ><%=aa.gettitle()%></td>
<td align="center" height="5%" name="price" value="<%=aa.getprice()%>"><%=aa.getprice()%></td>
<td align="center" height="5%"><input type="hidden" name="delete"><a href="../admin/tsz/dodelete.jsp?infoId=<%=aa.getinfoId()%>">删除商品</a></td>
</tr>
<% }%>
</table>
<br>
<div>
<a href="../admin/tsz/doCartlist.jsp?dangqian=1">首页</a>
<%if(dangqianye!=1){%>
<a href="../admin/tsz/doCartlist.jsp?dangqian=<%=dangqianye-1%>">上一页</a>
<%}%>
<%if(dangqianye!=zongye){%>
<a href="../admin/tsz/doCartlist.jsp?dangqian=<%=dangqianye+1%>">下一页</a>
<%}%>
<a href="../admin/tsz/doCartlist.jsp?dangqian=<%=zongye%>">尾页</a>
<p align="left" style="color: black">
<input type="button" value="全选" id="all">
<input id="reverse" type="button" value="反选"></p>
<p align="right">
<a style="color: black">已选商品<input type="text" id="num" size="1" style="background-color:transparent;color: red;
border-bottom:0px;
border-left:0px;
border-right:0px;
border-top:0px;" >件</a>
<a style="color: black">合计:¥<input type="text" id="totalprice" size="3" style="background-color:transparent;color: red;
border-bottom:0px;
border-left:0px;
border-right:0px;
border-top:0px;"></a>
</p>
<p align="right"><input type="submit" value="立即购买">
<a href="clearcart.jsp">清空购物车</a></p>
</div>
</form>
</div>
</body>
</html>