js代码：
<script type="text/javascript">
//全选、付款总金额
function checkAll(checked){
var allCheckBoxs = document.getElementsByName("shouldSum");
var allSum = document.getElementsByName("paySum");
var totalSum = document.getElementById("totalSum");
var sum = 0.0;
for (var i=0;i<allCheckBoxs.length ;i++){
if(allCheckBoxs[i].type=="checkbox"){
allCheckBoxs[i].checked=checked;
}
}
for(var i=0;i<allSum.length;i++){
sum += parseFloat(allSum[i].innerHTML);
}
totalSum.innerHTML = sum;
if(!checked){
totalSum.innerHTML = "0";
}
}
//多选、单选
function oddCheck(){
var sum = 0.0;
var totalSum = document.getElementById("totalSum");
for( var i=0;i<document.getElementsByName("shouldSum").length;i++) {
if(document.getElementsByName("shouldSum")[i].checked
&& document.getElementsByName("shouldSum")[i].type == "checkbox") {
sum += parseFloat(document.getElementsByName("paySum")[i].innerHTML);
}
}
totalSum.innerHTML = sum;
}
//去逛逛
function toShopping(){
window.location.href="#";
}
//付款
function toPay(){
window.location.href="#";
}
//给待付款、待发货、已发货、已签收添加单击事件
function nopay(){
document.getElementById("noPay").style.display="";
document.getElementById("waitDeliverGoods").style.display="none";
document.getElementById("alreadlyDeliverGoods").style.display="none";
document.getElementById("alreadlySignFor").style.display="none";
}
function waitdelivergoods(){
document.getElementById("waitDeliverGoods").style.display="";
document.getElementById("noPay").style.display="none";
document.getElementById("alreadlyDeliverGoods").style.display="none";
document.getElementById("alreadlySignFor").style.display="none";
}
function alreadlydelivergoods(){
document.getElementById("alreadlyDeliverGoods").style.display="";
document.getElementById("noPay").style.display="none";
document.getElementById("waitDeliverGoods").style.display="none";
document.getElementById("alreadlySignFor").style.display="none";
}
function alreadlysignfor(){
document.getElementById("alreadlySignFor").style.display="";
document.getElementById("noPay").style.display="none";
document.getElementById("waitDeliverGoods").style.display="none";
document.getElementById("alreadlyDeliverGoods").style.display="none";
}
</script>
html代码：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>会员中心</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- css样式-->
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,th,td
{
margin: 0;
padding: 0;
background-color: #f9f9f9;
}
.viptitle {
}
.viptitlecon {
padding-left: 10px;
margin-top: -30px;
color: #fff;
}
.vipstatu {
width: 90%;
margin: 5px auto 0px;
height: 70px;
background: #fff;
border-bottom: 1px solid #d3d3d3;
}
.vipstatu ul {
list-style-type: none;
padding: 20px;
background: #fff;
text-align: center;
}
.vipstatu ul li {
float: left;
width: 25%;
text-align: center;
background: #fff;
}
.allorder {
width: 90%;
margin: auto;
height: 30px;
background-color: #fff;
padding-top: 10px;
border-bottom: 1px solid #d3d3d3;
}
.ordernum {
padding: 5px;
background-color: transparent;
}
#orderkong {
text-align: center;
margin: 40px 0px;
}
.searchsc {
margin-top: 20px;
}
.qgg {
width: 100px;
height: 30px;
border: 1px solid #999;
background-color: #fff;
color: #00a9a4;
}
.orderlist {
border: 1px solid #d6d6d6;
background-color: #fff;
}
.orderlistcon {
width: 95%;
margin: auto;
background-color: transparent;
}
.orderlistcon ul {
list-style-type: none;
}
.orderlistcon ul li {
padding-bottom: 20px;
padding-top: 10px;
background-color: #fff;
height: 120px;
}
.js {
font-size: 14px;
width: 72%;
margin-left: 105px;
margin-top: -95px;
background-color: transparent;
}
.delete {
text-align: right;
background-color: transparent;
margin-top: 35px;
}
.delete a:link,a:visited {
text-decoration: none;
color: #e36c09;
}
.qxjg {
height: 30px;
background-color: #fff;
border: 1px solid #d3d3d3;
margin-top: 30px;
padding-top: 12px;
}
.paybtn {
margin: 20px 0px;
text-align: center;
}
.paybtns {
width: 100px;
height: 41px;
background: url(${pageContext.request.contextPath}/common/images/tinywebsite_images/gwc.png) no-repeat;
border: none;
color: #fff;
}
</style>
</head>
<body>
<div class="viptitle">
<img src="${pageContext.request.contextPath}/common/images/tinywebsite_images/vip.png" width="100%" />
</div>
<!--viptitle-->
<div class="viptitlecon">${user.nickname} 商城积分：${user.integral}</div>
<!--viptitlecon-->
<div class="vipstatu">
<ul>
<li><c:set var="index" value="0" /> <c:forEach
items="${myOrderList}" var="ordList">
<c:if test="${ordList.status==1}">
<c:set var="index" value="${index+1}" />
</c:if>
</c:forEach>
待付款<div id="onpay" class="ordernum" onclick="nopay()">${index}</div>
</li>
<li><c:set var="index1" value="0" /> <c:forEach
items="${myOrderList}" var="ordList">
<c:if test="${ordList.status==2}">
<c:set var="index1" value="${index1+1}" />
</c:if>
</c:forEach>
待发货<div id="waitdelivergoods" class="ordernum" onclick="waitdelivergoods()">${index1}</div>
</li>
<li><c:set var="index2" value="0" /> <c:forEach
items="${myOrderList}" var="ordList">
<c:if test="${ordList.status==3}">
<c:set var="index2" value="${index2+1}" />
</c:if>
</c:forEach>
已发货<div id="alreadlydelivergoods" class="ordernum" onclick="alreadlydelivergoods()">${index2}</div>
</li>
<li><c:set var="index3" value="0" /> <c:forEach
items="${myOrderList}" var="ordList">
<c:if test="${ordList.status==4}">
<c:set var="index3" value="${index3+1}" />
</c:if>
</c:forEach>
已签收<div id="alreadlysignfor" class="ordernum" onclick="alreadlysignfor()">${index3}</div>
</li>
</ul>
</div>
<!--vipstatu-->
<div class="allorder"> 全部订单</div>
<!--allorder-->
<c:if test="${myOrderList == null}">
<div id="orderkong" >
<h3>居然还没有订单</h3>
<div class="searchsc">
<input type="button" name="qgg" value="去逛逛" class="qgg" onclick="toShopping()"/>
</div>
</div>
</c:if>
<div id="onPay" >
<div class="orderlist">
<div class="orderlistcon">
<ul>
<c:forEach items="${myOrderList}" var="ord">
<c:if test="${ord.status==1}">
<li><input type="checkbox" id="shouldSum" name="shouldSum" value="" onclick="oddCheck()"/>
<img src="${pageContext.request.contextPath}/common/images/tinywebsite_images/orderlist.jpg" style="width:100px; height:100px;"/>
<div class="js">
商品金额：${ord.goodssum} 包裹数量：${ord.packagenumber} 商品数量：${ord.commoditynumber}<br />
应付金额：￥<span id="paySum" name="paySum" style="color:#c70c0b; font-size:16px;">${ord.payable}</span>
</div>
<div class="delete">
<a href="${pageContext.request.contextPath}/order/delete?id=${ord.id}">删除</a>
</div>
</li>
</c:if>
</c:forEach>
</ul>
</div>
<!--orderlistcon-->
</div>
<!-- orderlist-->
<div class="qxjg">
<div class="orderlistcon">
<input type="checkbox" name="chk" value="" onclick="checkAll(this.checked)"/> <span
style="color:#00a9a4;">全选</span>
<span style="float:right; color:#666;">商品总价：
￥<span id="totalSum" style="color:#c70c0b;">0</span>
</span>
</div>
</div>
<div class="paybtn">
<input type="button" name="paybtn" class="paybtns" value="付款" onclick="toPay()"/>
</div>
</div>
<!--waitDeliverGoods-->
<div id="waitDeliverGoods" style="display:none;">
<div class="orderlist">
<div class="orderlistcon">
<ul>
<c:forEach items="${myOrderList}" var="ord">
<c:if test="${ord.status==2}">
<li><input type="checkbox" name="chk" value="" checked />
<img src="${pageContext.request.contextPath}/common/images/tinywebsite_images/orderlist.jpg" style="width:100px; height:100px;"/>
<div class="js">
商品金额：${ord.goodssum} 包裹数量：${ord.packagenumber} 商品数量：${ord.commoditynumber}<br />
应付金额：<span style="color:#c70c0b; font-size:16px;">￥${ord.payable}</span>
</div>
<div class="delete">
<a href="${pageContext.request.contextPath}/order/delete?id=${ord.id}">删除</a>
</div>
</li>
</c:if>
</c:forEach>
</ul>
</div>
<!--orderlistcon-->
</div>
<!-- orderlist-->
</div>
<!--waitDeliverGoods-->
<!--alreadlyDeliverGoods-->
<div id="alreadlyDeliverGoods" style="display:none;" >
<div class="orderlist">
<div class="orderlistcon">
<ul>
<c:forEach items="${myOrderList}" var="ord">
<c:if test="${ord.status==3}">
<li><input type="checkbox" name="chk" value="" checked />
<img src="${pageContext.request.contextPath}/common/images/tinywebsite_images/orderlist.jpg" style="width:100px; height:100px;"/>
<div class="js">
商品金额：${ord.goodssum} 包裹数量：${ord.packagenumber} 商品数量：${ord.commoditynumber}<br />
应付金额：<span style="color:#c70c0b; font-size:16px;">￥${ord.payable}</span>
</div>
<div class="delete">
<a href="${pageContext.request.contextPath}/order/delete?id=${ord.id}">删除</a>
</div>
</li>
</c:if>
</c:forEach>
</ul>
</div>
<!--orderlistcon-->
</div>
<!-- orderlist-->
</div>
<!--alreadlyDeliverGoods-->
<!--alreadlySignFor-->
<div id="alreadlySignFor" style="display:none;" >
<div class="orderlist">
<div class="orderlistcon">
<ul>
<c:forEach items="${myOrderList}" var="ord">
<c:if test="${ord.status==4}">
<li><input type="checkbox" name="chk" value="" checked />
<img src="${pageContext.request.contextPath}/common/images/tinywebsite_images/orderlist.jpg" style="width:100px; height:100px;"/>
<div class="js">
商品金额：${ord.goodssum} 包裹数量：${ord.packagenumber} 商品数量：${ord.commoditynumber}<br />
应付金额：<span style="color:#c70c0b; font-size:16px;">￥${ord.payable}</span>
</div>
<div class="delete">
<a href="${pageContext.request.contextPath}/order/delete?id=${ord.id}">删除</a>
</div>
</li>
</c:if>
</c:forEach>
</ul>
</div>
<!--orderlistcon-->
</div>
<!-- orderlist-->
</div>
<!--alreadlySignFor-->
</body>
</html>
相关推荐
JS原生代码实现购物车添加商品、删除商品等操作的结算
插件描述：一款界面很舒服的，用户体验很高的购购物才结算插件。 参考示例：http://www.jq22.com/jquery-info4625
JS实现购物车结算功能代码
通过vue.js实现一个简单的购物车统计结算和移除效果
js实现手机移动端购物车结算页面特效.zip
本代码实现了一套完整的购物车功能，批量选择、批量删除。真正告别了霸王购物车，提供完整的注释，简单易懂
Vue模拟实现购物车结算功能 本文实例为大家分享了Vue实现购物车结算功能的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
高仿淘宝购物车结算js代码.rar
资源包含购物车的实现代码、购物车功能介绍、JS部分的详细讲解、视频演示和讲解。 购物车功能介绍：打开购物车的首页有雪花满屏飘落的动态背景和音乐，出现移动文字“欢迎进入购物车”等，点击鼠标后进去购物车界面...
vue.js制作购物车结算功能表单代码 vue.js制作购物车结算功能表单代码
jQuery移动端购物车结算页面代码,jQuery制作我的购物车商品添加删除结算手机页面模板代码。
利用原生html、css和js在MUI框架中写的购物车消费代码
js简单实现移动端购物车结算等多种功能，代码有注释方便修改。
本购物车除了支持对所选商品的自动结算外，还可对商品进行分类结算，界面上采用了TAB来分开显示，非常方便用户的操作，在js类库方面，除了jquery，还使用了一些封装库，下载本源码包后，里面附带有所需的所有文件。
点餐或是支付购物车列表页面，点击加减数量，底部自动结算功能的html5代码
Vue.js购物车商品结算表单页面代码，支持单选多选全选、商品数量加减、删除商品和清空购物车等功能。
jQuery仿淘宝购物车结算代码是一款实用的电子商务网站购物车结算特效下载。
jQuery手机购物车商品结算代码是一款手机端的购物车全选，全不选，局部全选，全选判定，购物车计算等等。