JS实现购物车中的动态操作（全选、统计数据、结账）

最新推荐文章于 2024-05-28 18:30:26 发布
最新推荐文章于 2024-05-28 18:30:26 发布
阅读量6.5k 收藏 43
点赞数 2
分类专栏： 自己总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42459672/article/details/99686274
版权

在这里插入图片描述在这里插入图片描述html代码;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/jd.css" />
		<link rel="stylesheet" type="text/css" href="icon/iconfont.css" />
		<script type="text/javascript" src="js/jd.js"></script>
	</head>
	<body>
		<!--导航开始-->
		<div class="nav">
			<div class="warp">
				<ul class="nav_ul1">
					<li><a href=""><i class="iconfont">&#xe6d3;</i>京东首页</a></li>
					<li><a href="">配送到：北京</a></li>
				</ul>
				
				<ul class="nav_ul2">
					<li><a href="">洋洋宝贝<span>|</span></a></li>
					<li><a href="">我的订单<span>|</span></a></li>
					<li><a href="">我的京东<span>|</span></a></li>
					<li><a href="">京东会员<span>|</span></a></li>
					<li><a href="">企业采购<span>|</span></a></li>
					<li><a href="">京东手机<span>|</span></a></li>
					<li><a href="">关注京东<span>|</span></a></li>
					<li><a href="">客户服务<span>|</span></a></li>
					<li><a href="">网站导航</a></li>
				</ul>
			</div>			
		</div>
	
		<!--搜索框开始-->
		<div class="search">
			<div class="warp">
				<img src="img/logo.jpg">
				<div class="search_div">
					<input type="text" class="search_text" />
					<input type="button" value="搜索" class="search_but" />
				</div>
			</div>
		</div>
		
	
		<!--标题开始-->
		<div class="title warp">
			<h3>全部商品</h3>
			<div>
				<span>配送到</span>
				<select>
					<option value="">昌平区</option>
					<option value="">大兴区</option>
					<option value="">海定区</option>
					<option value="">长阳去</option>
					<option value="">朝阳区</option>
				</select>
			</div>
		</div>
		
		
		<!--显示菜单开始-->
		<div class="tips warp">
			<ul>
				<li>
					<input type="checkbox" name="fav" id="all" onclick="checkTest1(this)" />
					全选
				</li>
				<li>商品</li>
				<li>单价</li>
				<li>数量</li>
				<li>小计</li>
				<li>操作</li>
			
			</ul>
		</div>
		
		<!--商品详情展示开始-->
		<div class="info warp">
			<ul>
				<li class="info_1"><input type="checkbox" name="fav"/ onclick="checkTest2()"></li>
				<li class="info_2"><img src="img/img1.jpg" width="80px"></li>
				<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
		  	  	<li class="info_4"><a>颜色：灰色+粉红</a> </li>
		  	  	<li class="info_5">182.5</li>
		  	  	<li class="info_6">
		  	  		<button onclick="checkTest3(this,1),checkTest2()">-</button>
		  	  		<input type="text" name="" id="" value="1" />
		  	  		<button class="bot" onclick="checkTest3(this,2),checkTest2()">+</button>
		  	  		
		  	  	</li>
		  	  	<li class="info_7">￥182.5</li>
		  	  	<li>
		  	  		<a href="javascript:viod(0)" onclick="checkTest4(this),checkTest2()">删除</a><br />
		  	  		<!--
		  	  			# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。

						而javascript:void(0), 仅仅表示一个死链接
		  	  		-->
		  	  		<a>已到我的关注</a>
		  	  	</li>
			</ul>
		</div>
		
				<div class="info warp">
			<ul>
				<li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()"/></li>
				<li class="info_2"><img src="img/img1.jpg" width="80px"></li>
				<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
		  	  	<li class="info_4"><a>颜色：灰色+粉红</a> </li>
		  	  	<li class="info_5">182.5</li>
		  	  	<li class="info_6">
		  	  		<button onclick="checkTest3(this,1),checkTest2()">-</button>
		  	  		<input type="text" name="" id="" value="1" />
		  	  		<button class="bot" onclick="checkTest3(this,2),checkTest2()">+</button>
		  	  		
		  	  	</li>
		  	  	<li class="info_7">￥182.5</li>
		  	  	<li>
		  	  		<a href="javascript:viod(0)" onclick="checkTest4(this),checkTest2()">删除</a><br />
		  	  		<a>已到我的关注</a>
		  	  	</li>
			</ul>
		</div>
		
				<div class="info warp">
			<ul>
				<li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()"/></li>
				<li class="info_2"><img src="img/img1.jpg" width="80px"></li>
				<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
		  	  	<li class="info_4"><a>颜色：灰色+粉红</a> </li>
		  	  	<li class="info_5">182.5</li>
		  	  	<li class="info_6">
		  	  		<button onclick="checkTest3(this,1),checkTest2()">-</button>
		  	  		<input type="text" name="" id="" value="1" />
		  	  		<button class="bot" onclick="checkTest3(this,2),checkTest2()">+</button>
		  	  		
		  	  	</li>
		  	  	<li class="info_7">￥182.5</li>
		  	  	<li>
		  	  		<a href="javascript:viod(0)" onclick="checkTest4(this),checkTest2()">删除</a><br />
		  	  		<a>已到我的关注</a>
		  	  	</li>
			</ul>
		</div>
		
		
		<!--结算开始-->
		
		
	   <div class="balance warp">
	   	
	   	   <ul class="balance_ul1">
	   	   	<li>
	   	   		
	   	   		<input type="checkbox" name="fav" id="" value="" onclick="checkTest1(this)" />
	   	   		全选
	   	   	</li>
	   	   	<li><a>删除选中商品</a></li>
	   	   	<li><a>移到我的关注</a></li>
	   	   	<li><a>清除下柜商品</a></li>
	   	   </ul>
	   	   
	   	   <ul class="balance_ul2">
	   	   	
	   	   	 <li>已经选择<span id="snum">0</span>件商品</li>
	   	   	 <li>总价 <span id="zongz">￥0</span></li>
	   	   	 <li>
	   	   	 	<button class="butt">去结算</button>
	   	   	 	
	   	   	 </li>
	   	   	
	   	   </ul>
	   	
	   	
	   </div>
	</body>
</html>

js代码


	//获得所有属性name为fav的多选框
var fav=document.getElementsByName("fav");
//判断是否全选
function checkTest1(th){
	var flag=th.checked;//点击全选
	//alert(flag);
/*	if(flag){
		for(var i in fav){
			fav[i].checked=true;
		}
	}else{
		for(var i in fav){
			fav[i].checked=false;
		}
	}
*/

	for(var i in fav){
		fav[i].checked=flag;
	}
}

//单选决定全选操作
function checkTest2(){
	var flag=true;
	for(var i=1;i<fav.length-1;i++){
		if(!fav[i].checked){//如果有有个没被选择，则返回false
			flag=false;
			break;
		}
	}
	//决定框是否勾选
	fav[0].checked=flag;
	fav[fav.length-1].checked=flag;
	
	//价格是否统计
	//商品的总价格
	var zong=0;
	//统计是否有勾选的对象
	var num=0;
	//统计商品的数量
	var spNum=0;
	
	for(var i=1;i<fav.length-1;i++){
		if(fav[i].checked){
			//获得ul父节点
			num++;
			var par=fav[i].parentNode.parentNode;
			//获得指定ul下面的所有的li
			var li=par.getElementsByTagName("li");
			//单个商品的总价格
			var z=li[6].innerText.split("￥")[1];
			//获得所有商品的总价格
			zong+=Number(z);
			document.getElementById("zongz").innerText=zong;
			
			
			//获得商品的数量
			var z2=li[5].getElementsByTagName("input");
			var num2=z2[0].value;
			spNum+=Number(num2);
			//获得商品数量统计的对象
			document.getElementById("snum").innerText=spNum;
			
			
			
		}
	}

	if(num==0){
		document.getElementById("zongz").innerText=0;
		document.getElementById("snum").innerText=0;
	}
}
Xiao祁的博客
关注
  • 2
    点赞
  • 踩
  • 43
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
购物车实现选中商品算出总价（js）
weixin_44423938的博客
03-26 6599
思想：a:首先可以通过数据库，当你点击一次选择时，对复选框进行扫描，查出所有已经被选中的复选框，这个复选框需要加一个自定义属性，这个属性就是这个商品的id号，通过id号在数据库查询相应的价格进行累加。b:我这里没有用数据库，因为我的上一个需求已经把价格从数据库拿出来了，所以我直接在复选框上加了一个商品价格的自定义属性，当每次点击复选框时对复选框进行扫描，查出所有已经被选中的复选框，然后获取到价格进...
利用js实现购物车相关功能
weixin_63489869的博客
06-22 4711
利用js实现购物车相关功能
js实现购物车基本功能
最新发布
m0_71606684的博客
05-28 328
js实现购物车加、减、单选、全选、删除、价格总汇、数量总汇；
Html、Css、javaScript 网页制作之京东购物车
gdd1990shl的博客
04-07 5115
一.Html: 京东购物车.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <!--<link rel="stylesheet" type="text/css" href=
HTML+CSS+JS仿京东购物车页面动态效果
赵广陆
04-30 1万+
目录 1 用到的知识 1.1 js选择器 1.2 循环语句 1.3 文档修改语句 1.4 模块移除属性 2 HTML代码 3 CSS代码 3.1 预处理css 3.2 jd购物车页面的css 4 jd购物车页面的js 5 效果展示 1 用到的知识 前面静态页面知识：HTML+CSS仿京东购物车页面静态页面 1.1 js选择器 var fav=document....
京东 淘抢购代码
晴天有点孤单
10-19 9553
var nIntervId; var count = 1; var goDate; function go() { console.log(&amp;quot;小桃子 ^_^ 正在帮你抢购＊＊＊＊＊＊＊＊＊＊＊＊＊ 刷新&amp;quot; + count + &amp;quot;次&amp;quot;); //console.log(&amp;quot;host:&amp;quot; + window.location.hostname);
js逆向破解 —— 懂车帝视频链接
Mr.louis
03-22 6395
背景 话说下午有一朋友发我一链接https://zjbyte.cn/i6615388842591518733/，让我帮忙看一下这个网页中视频链接是怎么获取的。我断断续续地花了两三个小时，最后终于把它给拿下了。在整个分析的过程中，我觉得还算是有点意思，所以写下这便博客，记录一下。 初步分析 话不多说，撸起袖子就是干。我打开了网页，并打开了 开发者工具 ，并在 network选项卡中清除掉请求，重新刷...
js 全选
qq_49438920的博客
06-06 1014
checkbox全选实现，Array.from、every、forEach的应用
用JavaScript做简易的购物车的代码示例
10-19
在本文中，我们将深入探讨如何使用JavaScript实现一个简单的购物车功能。这个购物车示例主要展示了如何使用原生JavaScript处理用户交互，包括选择商品、更改商品数量和删除商品。我们将分析代码结构，解释各个部分的...
Vue2.0实现购物车功能
08-30
本文详细介绍了 Vue2.0 实现购物车功能的知识点，包括 Vue.js 的基本概念、开发准备、目录结构、购物车界面、Vue 实例、购物车功能实现、收货地址选择页面和结账功能等。希望对大家的学习有所帮助。
带计算，全选，多选，全不选的购物车
11-02
在实现这些功能时，前端开发者通常会使用JavaScript或类似的客户端脚本语言来处理用户的交互，而后台则需要有相应的逻辑来处理请求并更新数据库中的购物车状态。此外，良好的设计和用户体验也是关键，比如提供清晰的...
原生js简易购物车商品数量计算代码
11-02
原生js简易购物车商品数量计算代码 原生js简易购物车商品数量计算代码
vue购物车商品累加结算代码
04-25
总的来说，这个“vue购物车商品累加结算代码”是一个完整的购物车功能实现，展示了Vue.js如何优雅地处理用户交互和数据管理，同时也包含了前端开发中常见的功能需求。通过学习和理解这个项目，开发者可以加深对Vue....
vue仿饿了么购物车
08-13
在购物车中，商品的增加、减少、全选、全取消等操作都可通过事件触发，更新数据。 6. **状态管理**：随着应用复杂度的增加，单组件内的数据管理可能会变得复杂。Vuex是Vue官方推荐的状态管理库，可以集中管理全局...
购物车ajax php json,使用Ajax、json实现京东购物车结算界面的数据交互实例（图文教程）...
weixin_32204235的博客
03-09 410
这篇文章主要介绍了使用Ajax、json实现京东购物车结算界面的数据交互实例,非常不错，具有参考借鉴价值，需要的朋友可以参考下全选商品单价数量小计操作全选删除选中产品总价：￥0margin:0;padding:0;font-family:"microsoft yahei";list-style:none;text-decoration:none;}.fl{float:left;}.fr{float...
购物车全选单选功能实现
weixin_42187676的博客
11-10 1806
因为箭头符号后面没有{ },所有图中箭头符号后面的内容相当于 return item.isSelected
js购物车选中商品实现计算商品总价格
热门推荐
Return_KB的博客
01-09 1万+
为了在激烈的互联网竞争中获得一席之地，都努力使自己的网站更为人性化。比如在购物网站一般都有这样的功能，那就是在结算商品的时候，网站可以自动计算要购买商品所需要花费的金钱数量。 代码实例如下: 010203040506070809101112131415161718192021222324252627282930313233343536373839html>head>meta charset
购物车（五）02-商品的全选控制——点击全选按钮控制选中与否：单选按钮的状态取反
weixin_44867717的博客
10-28 932
商品的全选控制——点击全选按钮控制选中与否：单选按钮的状态取反 控制商品是否全选 实现思路：把products中所有商品的checked属性全部修改一遍 selectAll () { // 实现所有商品的全部选中或者全部取消 // 控制全选按钮的样式 this.isAll = !this.isAll let products = [...this.products] // 修改所有的商品的选中状态 products.forEach(item => { item.ch
用js、html书写大型购物车页面之结算账单
wyhcczz的博客
09-13 3481
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>购物车功能的具体实现</title> <link rel="stylesheet" type="text/css" href="../css/shopping.css"/> <link rel="stylesheet" type="text/css" href="../c.
uniapp实现购物车 全选 单选 反选
03-30
在UniApp中实现购物车的全选、单选和反选功能，可以通过以下步骤进行操作： 1. 数据结构设计：首先，你需要定义一个购物车数据结构，可以使用数组或对象来表示每个商品的信息，例如商品名称、价格、数量等。同时，为每个商品添加一个选中状态的属性，用于记录是否被选中。 2. 渲染购物车列表：在页面中使用`v-for`指令遍历购物车数据，并将商品信息展示出来。同时，为每个商品的选中状态绑定一个`v-model`指令，用于实现单选功能。 3. 实现全选功能：添加一个全选的复选框，通过绑定一个变量来控制全选的状态。当全选复选框被点击时，遍历购物车数据，将每个商品的选中状态与全选状态保持一致。 4. 实现反选功能：添加一个反选按钮，当点击反选按钮时，遍历购物车数据，将每个商品的选中状态取反。 5. 计算总价和总数量：通过遍历购物车数据，累加选中商品的价格和数量，得到总价和总数量。 6. 相关代码示例： ```html <template> <div> <div> <input type="checkbox" v-model="selectAll" @change="handleSelectAll" /> 全选 <button @click="handleInverseSelect">反选</button> </div> <div v-for="(item, index) in cartList" :key="index"> <input type="checkbox" v-model="item.selected" @change="handleSelectItem(index)" /> {{ item.name }} - ￥{{ item.price }} - 数量：{{ item.quantity }} </div> <div> 总价：￥{{ totalPrice }}，总数量：{{ totalQuantity }} </div> </div> </template> <script> export default { data() { return { selectAll: false, cartList: [ { name: '商品1', price: 10, quantity: 1, selected: false }, { name: '商品2', price: 20, quantity: 2, selected: false }, { name: '商品3', price: 30, quantity: 3, selected: false } ] }; }, computed: { totalPrice() { let total = 0; for (let item of this.cartList) { if (item.selected) { total += item.price * item.quantity; } } return total; }, totalQuantity() { let total = 0; for (let item of this.cartList) { if (item.selected) { total += item.quantity; } } return total; } }, methods: { handleSelectAll() { for (let item of this.cartList) { item.selected = this.selectAll; } }, handleSelectItem(index) { this.cartList[index].selected = !this.cartList[index].selected; }, handleInverseSelect() { for (let item of this.cartList) { item.selected = !item.selected; } } } }; </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值