购物车单选、多选等功能

最新推荐文章于 2021-07-06 17:04:33 发布
最新推荐文章于 2021-07-06 17:04:33 发布
阅读量1.6k 收藏 3
点赞数
分类专栏： 商城功能 文章标签： jq 购物车
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hflxia/article/details/79610768
版权

不多讲，逻辑很简单，小白写法，直接运行代码

1：样式部分

body{
	background: #f5f5f5;
}
.head{
	width: 100%;
	height: 4.4rem;
	border-bottom: 1px solid #DDDDDD;
	text-align: center;
	line-height: 4.4rem;
	font-size:1.8rem;
	font-family:PingFangSC-Regular;
	color:rgba(34,34,34,1);
	position: relative;
	background: white;
}
.head-img{
	width: 0.95rem;
	height: 1.7rem;
	position: absolute;
	left: 1rem;
	top: 0;
}
.head-img img{
	width: 100%;
}
.main{
	width:100%;
	background:rgba(255,255,255,1);
	margin-top: 0.8rem;
	margin-bottom: 5rem;
}
.main1{
	width: 100%;
	border-bottom: 1px solid #EDEDED;
}
.main1-a{
	width: 95%;
	height: 5rem;
	margin: auto;
	display: flex;
	align-items: center;
}
.allcheck{
	width:2.1rem;
	height:2.1rem;
	background: url(../../img/d_cart.png);
	background-size: 100% 100%;
	border-radius: 50%;
}
.lttx{
	width:1.8rem;
	height:1.8rem;
	margin-left: 1rem;
}
.lttx img{
	width: 100%;
}
.ltwen{
	font-size:1.2rem;
	color:rgba(68,73,75,1);
	margin-left: 1rem;
}
.ltsl{
	font-size:1.2rem;
	color:rgba(68,73,75,1);
	margin-left: 0.5rem;
}
.back{
	width:0.55rem;
	height:1rem;
	margin-left: 2rem;
}
.back img{
	width: 100%;
}
.main2{
	width: 95%;
	height: 12rem;
	margin: auto;
	display: flex;
	align-items: center;
}
.check{
	width:2.1rem;
	height:2.1rem;
	background: url(../../img/d_cart.png);
	background-size: 100% 100%;
	border-radius: 50%;
}
.checkbox{
	width:2.1rem;
	height:2.1rem;
	opacity: 1;//后期将其设置为0，然后给父级元素改变背景图来优化效果
}
.checks{
	background: url(../../img/d_select.png);
	background-size: 100% 100%;
}
.sptp{
	width:9.6rem;
	height:9.6rem;
	margin-left: 1.5rem;
}
.sptp img{
	width: 100%;
	height: 100%;
}
.spwz{
	width: 25rem;
	height: 9.6rem;
	margin-left: 1.5rem;
	border-bottom: 1px solid #EDEDED;
}
.sp-mc{
	width: 17rem;
	font-size:1.3rem;
	color:rgba(44,49,52,1);
	line-height:1.9rem;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.sp-color{
	font-size:1.3rem;
	color:rgba(141,141,141,1);
	line-height:1.9rem;
	margin-top: 0.3rem;
}
.maney{
	font-size:1.4rem;
	color:rgba(230,54,54,1);
	line-height:1.9rem;
}
.spzj{
	display: flex;
	margin-top: 0.3rem;
	width: 20rem;
	justify-content: space-between;
	align-items: center;
}
.spzj-you{
	display: flex;
}
.jian,.jia{
	width:2.55rem;
	height:2.6rem;
	background:white;
	outline: none;
	font-size: 2rem;
	color: #ccc;
	border: 1px solid #D7D7D7;
}
.num{
	width:6.6rem;
	height:2.6rem;
	background:rgba(246,246,246,1);
	outline: none;
	border: none;
	margin-left: 0.5rem;
	margin-right: 0.5rem;
	font-size: 1.5rem;
}
.foot{
	width: 100%;
	height:4.75rem;
	background:rgba(255,255,255,1);
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.footoot{
	width: 95%;
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.foot-left{
	align-items: center;
	display: flex;
}
.qx{
	font-size:1.4rem;
	color:rgba(117,117,117,1);
	margin-left: 1rem;
}
.foot-right{
	display: flex;
	align-items: center;
}
.quanxuan{
	width:2.1rem;
	height:2.1rem;
	border: 1px solid #ccc;
	border-radius: 50%;
}
.red{
	font-size:1.4rem;
	color:rgba(245,89,89,1);
	margin-right: 1rem;
}
.btn{
	width:9.9rem;
	height:4.75rem;
	background:rgba(237,84,82,1);
	outline: none;
	border: none;
	font-size:1.3rem;
	color:rgba(255,255,255,1);
}
.nono{
	margin: auto;
	display: none;
}
.nono-img{
	width: 7rem;
	height: 6rem;
	margin: auto;
}
.nono-img img{
	width: 100%;
}
.nono p{
	text-align: center;
	margin-top: 2rem;
	font-size: 1.7rem;
	color: #666;
}

2.页面级js部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/cart.css">
	<script type="text/javascript">
		(function(win,doc){
				// 设置根节点字体
			var resize='orientationchange' in window?'orientationchange':'resize';
			function change(){
				var html=doc.documentElement;
		        var deviceWidth = html.clientWidth;
				  html.style.fontSize=deviceWidth/37.5+'px';
		    }
			win.addEventListener(resize,change,false);
			win.addEventListener('load',change,false);
			doc.addEventListener('DOMContentLoaded',change,false);
		})
	
	</script>
</head>
<body>
	<!-- head -->
	<div class="head">
		<p>购物车</p>
		<div class="head-img">
			<img src="../../img/d_share.png">
		</div>
	</div>
	
	<!-- main -->
		<div class="main">
			<div class="main-box">
				<div class="main1">
					<div class="main1-a">
						<div class="allcheck">
							<input type="checkbox" class="checkbox" name="">
						</div>
						<div class="lttx">
							<img src="https://yst-pjyc-server.oss-cn-beijing.aliyuncs.com/datas/image/20180317/20180317114730239520503.png">
						</div>
						<div class="ltwen">
							<p>老炮</p>
						</div>
						<div class="ltsl">
							
						</div>
						<div class="back">
							<img src="../../img/d_cart3.png">
						</div>
					</div>
				</div>
				<div class="main2 shop0" data-price="0.01" data-psid="1702" data-cartid="242" data-num="1" data-kunum="1" data-zongjia="0.01">
					<div class="check">
						<input type="checkbox" class="checkbox" name="">
					</div>
					<div class="sptp">
						<img src="https://yst-pjyc-server.oss-cn-beijing.aliyuncs.com/datas/image/20180317/20180317163702969961566.jpeg">
					</div>
					<div class="spwz">
						<p class="sp-mc">压迫感</p>
						<p class="sp-color">白色</p>
						<div class="spzj">
							<p class="maney">¥<span class="maney1">0.01</span></p>
							<div class="spzj-you">
								<button class="jian">-</button><button class="num" value="1">1</button><button class="jia">+</button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="main-box">
				<div class="main1">
					<div class="main1-a">
						<div class="allcheck">
							<input type="checkbox" class="checkbox" name="">
						</div>
						<div class="lttx">
							<img src="https://yst-pjyc-server.oss-cn-beijing.aliyuncs.com/datas/image/20180317/20180317114502725808403.png">
						</div>
						<div class="ltwen">
							<p>山大王</p>
						</div>
						<div class="ltsl"></div>
						<div class="back">
							<img src="../../img/d_cart3.png">
						</div>
					</div>
				</div>
				<div class="main2 shop0" data-price="0.1" data-psid="1676" data-cartid="243" data-num="1" data-kunum="6" data-zongjia="0.1">
					<div class="check">
						<input type="checkbox" class="checkbox" name="">
					</div>
					<div class="sptp">
						<img src="https://yst-pjyc-server.oss-cn-beijing.aliyuncs.com/datas/image/20180317/20180317152045031040251.jpeg">
					</div>
					<div class="spwz">
						<p class="sp-mc">小白盒</p>
						<p class="sp-color">2</p>
						<div class="spzj">
							<p class="maney">¥<span class="maney1">0.1</span></p>
							<div class="spzj-you"><button class="jian">-</button><button class="num" value="1">1</button><button class="jia">+</button>
								
							</div>
						</div>
					</div>
				</div>
				<div class="main2 shop1" data-price="0.1" data-psid="1689" data-cartid="244" data-num="1" data-kunum="6" data-zongjia="0.1">
					<div class="check">
						<input type="checkbox" class="checkbox" name="">
					</div>
					<div class="sptp">
						<img src="https://yst-pjyc-server.oss-cn-beijing.aliyuncs.com/datas/image/20180317/20180317155703697584914.jpeg">
					</div>
					<div class="spwz">
						<p class="sp-mc">狗狗</p>
						<p class="sp-color">2</p>
						<div class="spzj">
							<p class="maney">¥<span class="maney1">0.1</span></p>
							<div class="spzj-you"><button class="jian">-</button><button class="num" value="1">1</button><button class="jia">+</button>
								
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	<!-- foot -->
	<div class="foot">
		<div class="footoot">
			<div class="foot-left">
				<div class="quanxuan">
					<input type="checkbox" class="checkbox" name="" >
				</div>
				<p class="qx">全选</p>
			</div>
			<div class="foot-right">
				<p class="red">商品总价：<span class="allmaney-a">¥<span id="allmaney">0</span></span></p>
				<button class="btn">去结算</button>
			</div>
		</div>
	</div>
	<!-- 空 -->
	<div class="nono">
		<div class="nono-img">
			<img src="../../img/d_shopcart.png">
		</div>
		<p>购物车竟然是空的~</p>
	</div>
</body>
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript">
//店铺全选  取消全选
var status=false;
var len1=0;
var all_len=0;
var all_check=0;
$(document).on('click','.allcheck input',function(){
	var that=$(this);
	var child_input=$(this).parent().parent().parent().parent().find('.main2 input');
	$.each(child_input, function() {
		if(that.is(':checked')){
			$(this).prop('checked',true);
			$(this).parent().addClass('checks');
			that.parent().addClass('checks');
			
		}else{
			$(this).prop('checked',false);
			$(this).parent().removeClass('checks');
			that.parent().removeClass('checks');
		}
	});
})
//单选取消全选
$(document).on('click','.main2 input',function(){
	var inps=$(this).parents(".main-box").find('.main2 input');
	var len2=inps.length;
	$.each(inps, function(i,elem) {
		if($(elem).prop('checked')){
			$(elem).parent().addClass('checks');
			len1++;
		}else{
			$(elem).parent().removeClass('checks');
		}
	});
	var per_inp=$(this).parents(".main-box").find('.main1 .allcheck input');
	if(len2==len1){
		$(per_inp).prop('checked',true);
		$(per_inp).parent().addClass('checks');
	}
	if(len2!=len1){
		$(per_inp).prop('checked',false);
		$(per_inp).parent().removeClass('checks');
	}
	len1=0;
})
//全选
$(document).on('click','.quanxuan input',function(){
	var all_inp=$('.main-box input');
	var all_status=$(this).prop('checked');
	$.each(all_inp,function(){
		$(this).prop('checked',all_status);
		if(all_status){
			$(this).parent().addClass('checks');
		}else{
			$(this).parent().removeClass('checks');
		}
	})
})
//单独input
$(document).on('click','input',function(){
	var all_inp=$('.main-box input');
	// console.log(all_inp)
	all_len=all_inp.length;
	if($(this).is(':checked')){
		$(this).parent().addClass('checks');
	}else{
		$(this).parent().removeClass('checks');
	}
	$.each(all_inp,function(i,elem){
		if($(elem).prop('checked')){
			all_check++;
		}
	})
	if(all_check==all_len){
		$('.quanxuan input').prop('checked',true);
		$('input').parent().addClass('checks');
	}else{
		$('.quanxuan').removeClass('checks')
		$('.quanxuan input').prop('checked',false);

	}
	all_check=0;
})
</script>
</html>


husky花
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
购物车的全选,反选
qq_42818575的博客
11-23 119
package com.example.Liuhang0120.ui.frag; import android.content.Context; import android.os.Bundle; import android.support.annotation.NonNull; import android.support.annotation.Nullable; import android...
界面小项目之W3C
weixin_30670925的博客
07-08 97
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>text8</title> <link rel="stylesheet" href="css/reset.css"></head> <style&...
javaScript原生版购物车：全选、单选、全删、商品数量增减、计算总价、添加商品（代码）
小福气的博客
07-06 8179
题目： CSS代码如下： <style> *{ margin:0px; padding:0px; } .header,.content,.floot{ width:800px; margin:0pxauto; } .headerulli,.contentulli{ ...
彻底弄懂CSS盒子模式 之一
weixin_30521649的博客
03-31 191
彻底弄懂CSS盒子模式 作者：webflash　时间： 2007-03-18　文档类型：原创　来自：蓝色理想 前言 如果你想尝试一下不用表格来排版网页，而是用CSS来排版你的网页，也就是常听的用DIV来编排你的网页结构，又或者说你想学习网...
购物车全选单选功能实现
weixin_42187676的博客
11-10 1806
因为箭头符号后面没有{ },所有图中箭头符号后面的内容相当于 return item.isSelected
购物车中多选单选Demo
05-26
简单明了的实现了购物车中的单选和多选，可根据自身情况自己设定。
Vue实现购物车的全选、单选、显示商品价格代码实例
10-17
在Vue.js中实现购物车功能，包括全选、单选以及动态显示商品价格，涉及到Vue的数据绑定、事件处理以及计算属性等多个核心概念。以下是对这些知识点的详细解释： 1. **数据绑定** (`v-model`): Vue的核心特性之一，...
ios objective-c 购物车 多选 单选 左滑删除
07-01
本项目“ios objective-c 购物车 多选 单选 左滑删除”是一个典型的移动应用功能模块，它涵盖了购物车的核心交互特性。下面将详细介绍这个项目中的关键技术点和实现细节。 首先，购物车模型（Shopping Cart Model）...
swift-一个逻辑清晰的购物车模型包含单选多选和全选以及左滑收藏删除等常规功能
08-15
购物车模型不仅需要处理商品的添加、删除，还需要支持单选、多选以及全选等操作，同时提供左滑收藏或删除的功能，以提升用户体验。在这个名为"JVShopcart-master"的项目中，我们可以看到开发者如何实现这些功能。 ...
仿购物车功能（添加、删除、结算、单选、全选商品等功能）
08-01
购物车功能涉及到用户在浏览商品时，能够选择并暂存想要购买的商品，同时支持多种操作，如添加、删除、结算以及单选和全选商品。在这个过程中，接口回调和Bean绑定Tag等技术起到关键作用。 首先，我们要理解购物车...
ios-tableview多选与单选，用于地址，购物车.zip
07-11
可实现默认地址的选取，与购物车的多选。代码还未完善，勿喷
购物车多选
07-07
购物车效果
iOS 购物车的全选，单选的实现方法
划落永恒的博客
03-11 3263
类似淘宝的购物车类型 实现方法有千万种，我使用了字典数据key不能重复的特性，当然集合也具备这个特性，只要具备这个特性的都可以使用这种思路实现购物车的全选， 我定义了一个数组listArray 存储所有的数据类型，和一个selectDict选中的商品字典类型 selectDict存储数据类型大概是这样 将选中cell的indexPath设为字典的key，以为key不能重复，因此
复选框的全选反选实现（即购物车的复选框实现）
Daopao的博客
03-12 9562
这周工作时在做全选时遇到卡壳，趁着闲暇时间整理一下全选的的几种实现方式。 html页面 测试页面 全选 js代码 第一种方式 $("#allCheck").click(function(){ if($(this).attr("checked")){ $("input[name='check']").at
vue - 实现购物车分类商品的单选和多选
sunshime的博客
03-05 1781
  今天用了一下空闲时间来实现了购物车部分商品的单选和多选，下面来个案例供大家参考： 效果图： 案例代码如下： <template> <div class="text"> <div class v-for="(item,index) in dataList" :key="index"> <div class="yesterday"&...
二级列表实现 仿淘宝购物车 实现单选多选 添加功能
zyanna的博客
06-28 1315
购物车页面布局&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"&...
iOS开发中的单选与多选
陈云峰技术博客
12-01 3723
在前端开发中如果要拥有一个单选或者多选功能十分简单，因为HTML中有现成的标签可以很方便的实现单选或者多选效果，比如这样写上几句代码就能拥有最原始的选择效果。但是在iOS开发中就没有这么方便的控件了，如果要完成单选或者多选的功能还需要一些逻辑编码，并且可以选择的方案还是有很多的。在iOS开发中经常用于实现单选或者多选功能的控件是UITableView,并且，通过这个控件可以完成一个App80%的界面
uniapp手写 购物车单选 全选 反选
wow~
06-10 2424
uniapp手写 购物车单选 全选 反选这里是用图片切换的方法显示没有用到 checkbox单选 选项 图片判断切换全选 选项 图片判断切换 这里是用图片切换的方法显示没有用到 checkbox 这个方法有个问题就是单选的时候从上面往下依次点击是没有问题的 但是从下面往上面点击是第一个总是取消不掉的BUG 单选 选项 图片判断切换 全选 选项 图片判断切换 // 单选 listCheck(item,index) { let that = th
大学物理-章节PPT！
最新发布
07-22
大学物理-章节PPT！
微信小程序购物车多选全选
11-30
以下是微信小程序购物车多选全选的实现方法： 1. 在wxml文件中，使用checkbox组件实现多选和全选功能，使用bindchange事件监听checkbox的状态变化，使用wx:for循环渲染商品列表。 ```html <view wx:for="{{goodsList}}" wx:key="id"> <checkbox value="{{item.checked}}" bindchange="checkboxChange" data-id="{{item.id}}"></checkbox> <view>{{item.name}}</view> <view>{{item.price}}</view> </view> <checkbox value="{{allChecked}}" bindchange="checkboxAllChange"></checkbox> <view>全选</view> <button bindtap="deleteGoods">删除</button> ``` 2. 在js文件中，定义goodsList数组存储商品列表，定义allChecked变量表示全选状态，定义selectedIds数组存储选中的商品id。 ```javascript Page({ data: { goodsList: [ { id: 1, name: '商品1', price: 10, checked: false }, { id: 2, name: '商品2', price: 20, checked: false }, { id: 3, name: '商品3', price: 30, checked: false } ], allChecked: false, selectedIds: [] }, // checkbox状态变化事件 checkboxChange: function(e) { var id = e.currentTarget.dataset.id; var checked = e.detail.value.length > 0; var goodsList = this.data.goodsList; for (var i = 0; i < goodsList.length; i++) { if (goodsList[i].id == id) { goodsList[i].checked = checked; break; } } this.setData({ goodsList: goodsList }); this.updateSelectedIds(); }, // 全选状态变化事件 checkboxAllChange: function(e) { var allChecked = e.detail.value.length > 0; var goodsList = this.data.goodsList; for (var i = 0; i < goodsList.length; i++) { goodsList[i].checked = allChecked; } this.setData({ goodsList: goodsList, allChecked: allChecked }); this.updateSelectedIds(); }, // 更新选中的商品id updateSelectedIds: function() { var goodsList = this.data.goodsList; var selectedIds = []; for (var i = 0; i < goodsList.length; i++) { if (goodsList[i].checked) { selectedIds.push(goodsList[i].id); } } this.setData({ selectedIds: selectedIds }); }, // 删除选中的商品 deleteGoods: function() { var selectedIds = this.data.selectedIds; var goodsList = this.data.goodsList; for (var i = goodsList.length - 1; i >= 0; i--) { if (selectedIds.indexOf(goodsList[i].id) >= 0) { goodsList.splice(i, 1); } } this.setData({ goodsList: goodsList, allChecked: false, selectedIds: [] }); } }) ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值