购物车单选、多选等功能

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

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>


  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
以下是微信小程序购物车多的实现方法: 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、付费专栏及课程。

余额充值