您的位置：首页 > Web前端 > JavaScript

购物车源码

2015-12-28 17:28 766 查看

利用简单的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('all');
var oReverse=document.getElementById('reverse');
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='10%'>***</td>
<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%>"&
b4d7
gt;下一页</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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript

相关文章推荐

新的分享

章节导航