jQuery实现仿淘宝购物车的栏目【计算总价、选购数量、指定删除】

最新推荐文章于 2024-01-01 11:30:00 发布
最新推荐文章于 2024-01-01 11:30:00 发布
阅读量1.4k 收藏 29
点赞数 4
分类专栏： web前端 JavaWeb 文章标签： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43097201/article/details/103107090
版权

功能比较齐全，欢迎讨论！页面展示：

 

具体代码（倘若想要整个图片集的话可以私聊我）：

​​<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>淘宝购物车页面</title>
    <link href="css/myCart.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="js/shopCart1.js"></script>
	<script type="text/javascript">
		
		
		$(document).ready(function(){
			
			//点击复选框全选或全不选效果
			
			//当我们点击全选的时候就直接全选所有的复选框
			$("#allCheckBox").click(function(){
				//我们需要用一个标签来记录我们全选的状态
				var state = $(this).is(":checked");
				//把我们全选框的状态赋值给所有的复选框
				$("[name=cartCheckBox]").prop("checked",state);
				calculate();
			});
			
			//当我们所有的复选框都选上之后,就把全选框变为已选择
			$(".cart_td_1").children().click(function(){
				//获取所有复选框的总数
				var total = $("[name=cartCheckBox]").size();
				var current_check = 0;
				//遍历判断我们选中的所有复选框的个数
				$("[name=cartCheckBox]").each(function(i,e){
					//判断我们所有的复选框选中的个数
					if($(e).is(":checked") == true){
						current_check++;
					}
					//重复调用累积价格总和的方法
					calculate();
				});
				
				if(current_check == total){
					$("#allCheckBox").prop("checked",true);
					calculate();
				}else{
					$("#allCheckBox").prop("checked",false);
				}
			});
			
			//点击删除
			$(".cart_td_8").children().click(function(){
				//删除掉前面的店家信息
				$(this).parent("td").parent("tr").prev("tr").remove();
				//删除掉删除超链接所在的tr
				$(this).parent("td").parent("tr").remove();
				calculate();
			});
			
			//删除所选
			$("#deleteAll").click(function(){
				//判断选中的所有复选框进行删除
				$("[name=cartCheckBox]").each(function(i,e){
					if($(e).is(":checked") == true){
						//删除掉前面的店家信息
						$(this).parent("td").parent("tr").prev("tr").remove();
						//删除掉删除超链接所在的tr
						$(this).parent("td").parent("tr").remove();
						calculate();
					}
				});
			});
			
			//选择-号
			$(".hand[alt=minus]").click(function(){
				//获取num_input这个文本框里面的value值
				//一定要注意,我们这里定的是减号,取的是减号后面的值
				var number = $(this).next(".num_input").val();
				//点击一次就自减一次
				number--;
				if(number <= 0){
					alert("最少不能为0");
				}else{
					//这里一定要记得使用val,因为它是value值
					$(this).next(".num_input").val(number);
					calculate();
				}
			});
			
			//选择+号
			$(".hand[alt=add]").click(function(){
				//获取num_input这个文本框里面的value值
				//一定要注意,我们这里定的是减号,取的是减号后面的值
				var number = $(this).prev(".num_input").val();
				//点击一次就自减一次
				number++;
				if(number <= 0){
					alert("最少不能为0");
				}else{
					//这里一定要记得使用val,因为它是value值
					$(this).prev(".num_input").val(number);
					calculate();
				}
			});
			
			//计算总价与小计
			function calculate(){
				//总价
				var total_price = 0;
				
				$("tr[id]").each(function(i,e){
					//单价
					var price;
					//数量
					var number;
					
					price = parseFloat($(this).children(".cart_td_5").text());
					number = parseInt($(this).find(".num_input").val());
					//这里只是计算单价,总价需要选择后才能计算
					$(this).children(".cart_td_7").text(number*price);	
					
					//总价的话我们需要判断选中的才进行计算
					if($(this).children(".cart_td_1").children().is(":checked") == true){
						total_price = total_price + (number*price);
					}
				});		
				
				$("#total").text(total_price);
				
			}
			
			//加载时调用
			calculate();
			
		});
			
	</script>
</head>
<body>
<div id="header"><img src="images/taobao_logo.gif" alt="logo" /></div>
<div id="nav">您的位置：<a href="#">首页</a> &gt; <a href="#">我的淘宝</a> &gt; 我的购物车</div>
<div id="navlist">
    <ul>
        <li class="navlist_red_left"></li>
        <li class="navlist_red">1. 查看购物车</li>
        <li class="navlist_red_arrow"></li>
        <li class="navlist_gray">2. 确认订单信息</li>
        <li class="navlist_gray_arrow"></li>
        <li class="navlist_gray">3. 付款到支付宝</li>
        <li class="navlist_gray_arrow"></li>
        <li class="navlist_gray">4. 确认收货</li>
        <li class="navlist_gray_arrow"></li>
        <li class="navlist_gray">5. 评价</li>
        <li class="navlist_gray_right"></li>
    </ul>
</div>

<div id="content">
	<form action="" method="post" name="myform">
    	<table width="100%" border="0" cellspacing="0" cellpadding="0" id="shopping">        
            <tr>
                <td class="title_1"><input id="allCheckBox" type="checkbox" value=""/>全选</td>
                <td class="title_2" colspan="2">店铺宝贝</td>
                <td class="title_3">获积分</td>
                <td class="title_4">单价（元）</td>
                <td class="title_5">数量</td>
                <td class="title_6">小计（元）</td>
                <td class="title_7">操作</td>
            </tr>
            <tr>
                <td colspan="8" class="line"></td>
            </tr>
            <tr>
                <td colspan="8" class="shopInfo">店铺：<a href="#">纤巧百媚时尚鞋坊</a>    卖家：<a href="#">纤巧百媚</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
            </tr>
            <tr id="product1">
                <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product1"/></td>
                <td class="cart_td_2"><img src="images/taobao_cart_01.jpg" alt="shopping"/></td>
                <td class="cart_td_3"><a href="#">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a><br />
                    颜色：棕色 尺码：37<br />
                    保障：<img src="images/taobao_icon_01.jpg" alt="icon" /></td>
                <td class="cart_td_4">5</td>
                <td class="cart_td_5">138.00</td>
                <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" class="hand"/> <input id="num_1" type="text"  value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" class="hand"/></td>
                <td class="cart_td_7"></td>
                <td class="cart_td_8"><a href="javascript:void(0);">删除</a></td>
            </tr>

            <tr>
                <td colspan="8" class="shopInfo">店铺：<a href="#">香港我的美丽日记</a>    卖家：<a href="#">lokemick2009</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
            </tr>
            <tr id="product2">
                <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product2" /></td>
                <td class="cart_td_2"><img src="images/taobao_cart_02.jpg" alt="shopping"/></td>
                <td class="cart_td_3"><a href="#">chanel/香奈尔/香奈尔炫亮魅力唇膏3.5g</a><br />
                    保障：<img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg" alt="icon" /></td>
                <td class="cart_td_4">12</td>
                <td class="cart_td_5">265.00</td>
                <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" class="hand"/> <input id="num_2" type="text"  value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" class="hand"/></td>
                <td class="cart_td_7"></td>
                <td class="cart_td_8"><a href="javascript:void(0);">删除</a></td>
            </tr>

            <tr>
                <td colspan="8" class="shopInfo">店铺：<a href="#">实体经营</a>    卖家：<a href="#">林颜店铺</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
            </tr>
            <tr id="product3">
                <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product3"/></td>
                <td class="cart_td_2"><img src="images/taobao_cart_03.jpg" alt="shopping"/></td>
                <td class="cart_td_3"><a href="#">蝶妆海?蓝清滢粉底液10#（象牙白）</a><br />
                    保障：<img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg" alt="icon" /></td>
                <td class="cart_td_4">3</td>
                <td class="cart_td_5">85.00</td>
                <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" class="hand"/> <input id="num_3" type="text"  value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" class="hand"/></td>
                <td class="cart_td_7"></td>
                <td class="cart_td_8"><a href="javascript:void(0);">删除</a></td>
            </tr>

            <tr>
                <td colspan="8" class="shopInfo">店铺：<a href="#">红豆豆的小屋</a>    卖家：<a href="#">taobao豆豆</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
            </tr>
            <tr id="product4">
                <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product4"/></td>
                <td class="cart_td_2"><img src="images/taobao_cart_04.jpg" alt="shopping"/></td>
                <td class="cart_td_3"><a href="#">相宜促销专供 大S推荐 最好用的LilyBell化妆棉</a><br />
                    保障：<img src="images/taobao_icon_01.jpg" alt="icon" /></td>
                <td class="cart_td_4">12</td>
                <td class="cart_td_5">12.00</td>
                <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" class="hand"/> <input id="num_4" type="text"  value="2" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" class="hand"/></td>
                <td class="cart_td_7"></td>
                <td class="cart_td_8"><a href="javascript:void(0);">删除</a></td>
            </tr>

            <tr>
                <td  colspan="3"><a id="deleteAll" href="javascript:void(0);"><img src="images/taobao_del.jpg" alt="delete"/></a></td>
                <td colspan="5" class="shopend">商品总价（不含运费）：<label id="total" class="yellow"></label> 元<br />
                    可获积分 <label class="yellow" id="integral"></label> 点<br />
                    <input name=" " type="image" src="images/taobao_subtn.jpg" /></td>
            </tr>        
    	</table>
    </form>

</div>
</body>
</html>

 

在HTML中调用的两个CSS样式代码：

/*  myCart.css  */

@charset "gb2312";
/* CSS Document */

body{
	margin:0px;
	padding:0px;
	font-size:12px;
	line-height:20px;
	color:#333;
   }
ul,li,ol,h1,dl,dd{
	list-style:none;
	margin:0px;
	padding:0px;
	}
a{
	color:#1965b3;
    text-decoration: none;
	}    
a:hover{
	color:#CD590C;
	text-decoration:underline;
	}
img{
	border:0px;
	vertical-align:middle;
	}
#header{
	height:40px;
	margin:10px auto 10px auto;
	width:800px;
	clear:both;
	}
#nav{
	margin:10px auto 10px auto;
	width:800px;
	clear:both;
	}
#navlist{
	width:800px;
	margin:0px auto 0px auto;
	height:23px;
	}
	#navlist li{
		float:left;
		height:23px;
		line-height:26px;
	}
	.navlist_red_left{
		background-image:url(../images/taobao_bg.png);
		background-repeat:no-repeat;
		background-position:-12px -92px;
		width:3px;
		}
	.navlist_red{
		background-color:#ff6600;
		text-align:center;
		font-size:14px;
		font-weight:bold;
		color:#FFF;
		width:130px;
		}
	.navlist_red_arrow{
		background-color:#ff6600;
		background-image:url(../images/taobao_bg.png);
		background-repeat:no-repeat;
		background-position:0px 0px;
		width:13px;
		}
	.navlist_gray{
		background-color:#e4e4e4;
		text-align:center;
		font-size:14px;
		font-weight:bold;
		width:150px;
		}
	.navlist_gray_arrow{
		background-color:#e4e4e4;
		background-image:url(../images/taobao_bg.png);
		background-repeat:no-repeat;
		background-position:0px 0px;
		width:13px;
		}
	.navlist_gray_right{
		background-image:url(../images/taobao_bg.png);
		background-repeat:no-repeat;
		background-position:-12px -138px;
		width:3px;
		}
#content{
	width:800px;
	margin:10px auto 5px auto;
	clear:both;
	}
	.title_1{
		text-align:center;
		width:50px;
		}
	.title_2{
		text-align:center;
		}
	.title_3{
		text-align:center;
		width:80px;
		}
	.title_4{
		text-align:center;
		width:80px;
		}
	.title_5{
		text-align:center;
		width:100px;
		}
	.title_6{
		text-align:center;
		width:80px;
		}
	.title_7{
		text-align:center;
		width:60px;
		}
	.line{
		background-color:#a7cbff;
		height:3px;
		}
	.shopInfo{
		padding-left:10px;
		height:35px;
		vertical-align:bottom;
		}
	.num_input{
		border:solid 1px #666;
		width:25px;
		height:15px;
		text-align:center;
		}
	.cart_td_1,.cart_td_2,.cart_td_3,.cart_td_4,.cart_td_5,.cart_td_6,.cart_td_7,.cart_td_8{
		background-color:#e2f2ff;
		border-bottom:solid 1px #d1ecff;
		border-top:solid 1px #d1ecff;
		text-align:center;
		padding:5px;
		}
	.cart_td_1,.cart_td_3,.cart_td_4,.cart_td_5,.cart_td_6,.cart_td_7{
		border-right:solid 1px #FFF;
		}
	.cart_td_3{
		text-align:left;
		}
	.cart_td_4{
		font-weight:bold;
		}
	.cart_td_7{
		font-weight:bold;
		color:#fe6400;
		font-size:14px;
		}
	.hand{
		cursor:pointer;
		}
.shopend{
	text-align:right;
	padding-right:10px;
	padding-bottom:10px;
	}
.yellow{
	font-weight:bold;
	color:#fe6400;
	font-size:18px;
	line-height:40px;
	}


------------------------------------------------------------------------

/* register.css */

@charset "gb2312";
/* CSS Document */

body,dl,dt,dd,div,form {padding:0;margin:0;}

#header,#main{
	width:650px;
	margin:0 auto;
	}
.bg{
	background-image:url(../images/register_bg.gif);
	background-repeat:no-repeat;
	width:6px;
	height:6px;
	}
	.bg_top_left{
		background-position:0px 0px;
		}
	.bg_top_right{
		background-position:0px -6px;
		}
	.bg_end_left{
		background-position:0px -12px;
		}
	.bg_end_right{
		background-position:0px -18px;
		}
	.bg_top{
		border-top:solid 1px #666666;
		}
	.bg_end{
		border-bottom:solid 1px #666666;
		}
	.bg_left{
		border-left:solid 1px #666666;
		}
	.bg_right{
		border-right:solid 1px #666666;
		}


.content{
	padding:10px;
	}
	.inputs{
		border:solid 1px #a4c8e0;
		width:150px;
		height:15px;
	}
	
	.userWidth{
		width:110px;
		}
	.content div{
		float:left;
		font-size:12px;
		color:#000;
		}
	dl{
		clear:both;
		}
	dt,dd{
		float:left;
		}
	dt{
		width:130px;
		text-align:right;
		font-size:14px;
		height:30px;
		line-height:25px;
		}
	dd{
		font-size:12px;
		color:#666666;
		width:180px;
		}
/*当鼠标放到文本框时，提示文本的样式*/
.import_prompt{
	border:solid 1px #ffcd00;
	background-color:#ffffda;
	padding-left:5px;
	padding-right:5px;
	line-height:20px;
	}
/*当文本框内容不符合要求时，提示文本的样式*/
.error_prompt{
	border:solid 1px #ff3300;
	background-color:#fff2e5;
	background-image:url(../images/li_err.gif);
	background-repeat:no-repeat;
	background-position:5px 2px;
	padding:2px 5px 0px 25px;
	line-height:20px;
	}
/*当文本框内容输入正确时，提示文本的样式*/
.ok_prompt{
	border:solid 1px #01be00;
	background-color:#e6fee4;
	background-image:url(../images/li_ok.gif);
	background-repeat:no-repeat;
	background-position:5px 2px;
	padding:2px 5px 0px 25px;
	line-height:20px;
	}

 

ADAMs.
关注
  • 4
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
【jQuery】第二课：案例实践2——运用JavaScript制作淘宝购物车全选/取消全选功能
王迪
09-19 1393
1、需求描述： 运用JavaScript制作淘宝购物车全选/取消全选功能 2、实现思路： 1、制作购物车框架，这里用表格写，表格里涉及到表单元素复选框的使用 2、给表单元素起名字（因为我们需要获取不同表单元素的内容，并加以运算） 3、写js函数，实现全选/取消全选功能。window.onload=function(){} 3、需要掌握的知...
一个改进的用javascript写的购物车页面（具备添加、删除商品，计算总量和价格的功能）
weixin_43249665的博客
04-13 1815
看京东前端笔试相关的内容时，偶然看到一个博主分享的京东前端笔试编程题和他的解决方案，js基础不扎实的我仔仔细细把博主的解决方案看了一遍，并且进行了自认为是优化的优化，还增加了一些功能，在这里记录一下学到的东西！ 笔记 元素选取方法： 单个元素选取方法 Document.getElementById(“idString”) Document​.query​Selector(selectors)...
jQuery仿淘宝购物车自动结算金额效果
05-02
摘要:脚本资源,jQuery,自动结算,购物车 jQuery仿淘宝购物车自动结算金额效果，可根据商品单位和用户选购数量自动计算商品总值，适时计算，ajax 方式，用户修改产品时，最终的计算结果也会发生变化，适合用于在线购物一类的网站使用的网页特效。 运行环境：HTML/PHP/ASP/
jquery淘宝购物车结算
06-01
仿淘宝购物车结算，功能全部实现代码结构清晰。
jQuery 购物车模块
weixin_58017233的博客
07-09 788
参考pink老师 jQuery 购物车
jQuery+css+html淘宝购物车模块
qq_45387575的博客
03-22 4514
注意给checkbox添加事件就是用change() 给button添加事件就是用click（）
仿淘宝选择商品计算价格
06-01
仿淘宝选择商品计算价格,同一个商品有不同的版本，最后选择后计算出价格
jquery仿淘宝购物车页面商品结算（附源码）
weixin_30872337的博客
06-29 1641
1、效果图如下： 2、源码如下： html部分： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, u...
5.4.2 js实现的购物车 有添加商品 删除商品 计算价格 调整数量等
世上哪有什么岁月静好,不过是有人替你负重前行
12-25 1791
效果图： html代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <fieldset id=""> <legend>购物车</legend> 商品名称：<input type="text" name="" id="
jquery实现购物车根据商品的选择更改总价
weixin_44451084的博客
03-15 1056
jquery实现购物车根据商品的选择更改总价，数据为servlet页面获得，并用c标签的foreach循环遍历获得。主要为js部分的代码实现
仿淘宝的商品颜色、尺寸选择对应不同价格
07-24
仿淘宝选择不同颜色，不同规格，不同尺寸对应出不同的价格选择工具.用json+jquery实现
jQuery移动端购物车结算页面代码
01-08
jQuery移动端购物车结算页面代码,jQuery制作我的购物车商品添加删除结算手机页面模板代码。
JS仿淘宝详情商品类型选择实例
07-24
JS仿淘宝详情商品类型选择实例是一款淘宝商城购物车商品类型选购价格动态更新特效。
淘宝购物车页面效果实现 ,其中的全选中和结算跳转的逻辑也很完善
05-16
淘宝购物车页面效果实现 ,其中的全选中和结算跳转的逻辑也很完善 淘宝购物车页面效果实现 ,其中的全选中和结算跳转的逻辑也很完善淘宝购物车页面效果实现 ,其中的全选中和结算跳转的逻辑也很完善
基于JQuery的购物车添加删除以及结算功能示例
10-20
本篇文章主要介绍了基于JQuery的购物车添加删除以及结算功能示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
jQuery实现购物车的总价计算和总价传值功能
10-17
在本文中，我们将深入探讨如何使用jQuery来实现购物车的总价计算和总价传值功能。这对于电子商务网站来说是一项基本但至关重要的功能，它允许用户在选择商品后查看购物车的总价，并将这些信息传递到后台进行订单处理...
jQuery实现类似淘宝购物车全选状态示例
12-12
代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <... charset=utf-8″ /> <...script type=”text/javascript”
jQuery实现购物车多物品数量的加减+总价计算
10-25
在本示例中，我们将探讨如何使用jQuery实现购物车中多物品数量的加减操作，并实时计算购物车的总价。这有助于提升用户体验，因为用户可以看到每次操作后总价的变化。 首先，我们看到HTML结构包含一个表格（`<table>...
JS特效第59弹：仿淘宝购物车
最新发布
weixin_38343072的博客
01-01 490
经典的JS特效动画效果，效果实现的全部代码已提供，可供学习借鉴
jquery购物车总价计算
08-12
您好！对于使用jQuery计算购物车总价的问题，您可以按照以下步骤进行操作： 1. 首先，为每个商品的价格和数量添加相应的HTML标签和类名，例如： ``` <div class="item"> <span class="price">10.00</span> <input class="quantity" type="number" value="1"> </div> <div class="item"> <span class="price">20.00</span> <input class="quantity" type="number" value="2"> </div> ``` 2. 使用jQuery选择器获取每个商品的价格和数量元素，然后通过循环遍历它们： ```javascript var total = 0; $(".item").each(function() { var price = parseFloat($(this).find(".price").text()); var quantity = parseInt($(this).find(".quantity").val()); total += price * quantity; }); ``` 3. 最后，将计算得到的总价显示在页面上： ```javascript $(".total-price").text(total.toFixed(2));
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值