Jquery 实现购物车

淡淡的烟草味﹌ 2023-10-05 10:27 49阅读 0赞

## 购物车需求： ##

1、 当全选选中时，所有商品的小复选框的选中状态跟按下的全选按钮保持一致；

2、 当选中商品时，添加背景颜色；如果所有商品都被选中，就让全选按钮为选中状态；

3、 可以点击 +或 - 来增加或减少商品数量，也可以直接在文本框修改数量，数量修改之后的小计也会相应改变；

4、 可以进行删除单个商品、和选中商品以及清空购物车；

5、 进行操作时，下面的已选商品件数以及总额也会有相应变化；

#### 默认： ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70][]

#### 全选和改变数量效果 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1][]

#### 删除选中的商品 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 2][]

#### 删除之后的效果![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 3][] ####

#### JS代码： ####

$(function() {
    
    	//1.保留小数点
    	function saveDecimal(num, count) {
    		return num.toFixed(count);
    	}
    
    	//2.获得总计
    	function getTotal() {
    		//总计数
    		var count = 0;
    		//总金额
    		var sum = 0;
    		//原来单选按钮-输入文本-itxt
    		$(".j-checkbox:checked").parents(".cart-item").find(".itxt").each(function(i, ele) {
    			//累计
    			count += parseInt($(ele).val());
    		})
    
    		//单选按钮->小计p-sum
    		$(".j-checkbox:checked").parents(".cart-item").find(".p-sum").each(function(i, ele) {
    			//累计
    			sum += parseFloat($(ele).html().substr(1));
    		})
    
    		//赋值
    		$(".amount-sum em").html(count);
    		$(".price-sum em").html("￥" + saveDecimal(sum, 2));
    	}
    
    	//3.单击"+"(当前对象)
    	$(".increment").click(function() {
    		//1)获得文本值上一个
    		var quantity = $(this).prev(".itxt").val();
    		//2)累加
    		quantity++;
    		//重新赋值
    		$(this).prev(".itxt").val(quantity)
    
    		//3)获得价格,进行截取后面的值；
    		var price = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
    		//4）计算小计
    		var sum = quantity * price;
    
    		//5)赋值到小计中
    		$(this).parents(".p-num").siblings(".p-sum").html("￥" + saveDecimal(sum, 2));
    
    		//6）计算总个
    		getTotal();
    
    	});
    
    	//4.单击"-"(当前对象)
    	$(".decrement").click(function() {
    		//1)获得文本值下一个
    		var quantity = $(this).next(".itxt").val();
    		//2)减减 (只能是1)
    		(quantity <= 1) ? (quantity) : (quantity--);
    		//重新赋值
    		$(this).next(".itxt").val(quantity)
    
    		//3)获得价格,进行截取后面的值；
    		var price = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
    		//4）计算小计
    		var sum = quantity * price;
    
    		//5)赋值到小计中
    		$(this).parents(".p-num").siblings(".p-sum").html("￥" + saveDecimal(sum, 2));
    
    		//6）计算总个
    		getTotal();
    
    	});
    
    	//全选
    	$(".checkall").change(function() {
    		//如果全选选中，那么就下面多个复选框跟着被选中
    		$(".checkall, .j-checkbox").prop("checked", $(this).prop("checked"));
    
    		//计算总个
    		getTotal();
    
    		//判断全选选中，那么就添加背景
    		if($(this).prop("checked")) {
    			$(".cart-item").addClass("check-cart-item");
    		} else {
    			$(".cart-item").removeClass("check-cart-item");
    		}
    	})
    
    	//选择每一个单选
    	$(".j-checkbox").change(function() {
    		//如果全部选中个数=单选的个数，那么全选就被选中
    		if($(".j-checkbox:checked").length == $(".j-checkbox").length) {
    			$(".checkall").attr("checked", true);
    		} else {
    			$(".checkall").attr("checked", false);
    		}
    
    		//累计和
    		getTotal();
    
    		// 当小复选框为选中状态时，改变背景颜色（添加check-cart-item类）
    		//注意：对属性Property可以赋任何类型的值，而对特性Attribute只能赋值字符串！
    		console.log($(this).attr("checked"))
    		if($(this).prop("checked")) {
    			$(this).parents(".cart-item").addClass("check-cart-item");
    		} else {
    			$(this).parents(".cart-item").removeClass("check-cart-item");
    		}
    
    	});
    
    	// 当用户直接修改文本框时
    	$(".itxt").change(function() {
    		//1)数量
    		var quantity = $(this).val();
    
    		//2)判断验证
    		if(quantity <= 0) {
    			alert("数量不为零或负数");
    			$(this).val(1);
    			return;
    		}
    		//3)价格
    		var price = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
    
    		//4）计算小计
    		var sum = quantity * price;
    
    		//5)赋值到小计中
    		$(this).parents(".p-num").siblings(".p-sum").html("￥" + saveDecimal(sum, 2));
    
    		//6）计算总个
    		getTotal();
    
    	});
    
    	//删除单个商品
    	$(".p-action").click(function() {
    
    		//判断
    		if(confirm("您确定要删除吗？")) {
    			$(this).parents(".cart-item").remove();
    		}
    
    		//6）计算总个
    		getTotal();
    
    	});
    
    	//删除选中的商品(选中)
    	$(".remove-batch").click(function() {
    		//判断
    		if(confirm("您确定要删除吗？")) {
    			$(".j-checkbox:checked").parents(".cart-item").remove();
    		}
    		//6）计算总个
    		getTotal();
    	});
    	
    	//清理购物车(所有)
    	$(".clear-all").click(function(){
    		//判断
    		if(confirm("您确定要清空吗？")) {
    			$(".cart-item").remove();
    		}
    		//6）计算总个
    		getTotal();
    	})
    
    });

#### CSS样式 ####

* {
     	margin: 0;
     	padding: 0
     }
     
     em,
     i {
     	font-style: normal;
     }
     
     li {
     	list-style: none;
     }
     
     a {
     	color: #666;
     	text-decoration: none;
     }
     
     a:hover {
     	color: #e33333;
     }
     
     body {
     	font: 14px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
     	color: #666
     }
     
     .w {
     	width: 1200px;
     	margin: 0 auto;
     }
     
     .cart-thead {
     	height: 32px;
     	line-height: 32px;
     	margin: 5px 0 10px;
     	padding: 5px 0;
     	background: papayawhip;
     	border: 1px solid #e9e9e9;
     	border-top: 0;
     	position: relative;
     }
     
     .cart-thead>div,
     .cart-item>div {
     	float: left;
     }
     
     .t-checkbox,
     .p-checkbox {
     	height: 18px;
     	line-height: 18px;
     	padding-top: 7px;
     	width: 122px;
     	padding-left: 11px;
     }
     /*字体加粗*/
     .t-goods {
     	width: 400px;
     	font-weight: bolder;
     }
     
     .t-price {
     	width: 120px;
     	padding-right: 40px;
     	text-align: right;
     	font-weight: bolder;
     }
     
     .t-num {
     	width: 150px;
     	text-align: center;
     	font-weight: bolder;
     }
     
     .t-sum {
     	width: 100px;
     	text-align: right;
     	font-weight: bolder;
     }
     
     .t-action {
     	width: 130px;
     	text-align: right;
     	font-weight: bolder;
     }
     /*每一个小块div*/
     .cart-item {
     	height: 120px;
     	border-style: solid;
     	border-width: 2px 1px 1px;
     	border-color: #aaa #f1f1f1 #f1f1f1;
     	background: #fff;
     	padding-top: 14px;
     	margin: 15px 0;
     }
     /*选中后添加背景颜色*/
     .check-cart-item {
     	background: azure;
     }
     
     .p-checkbox {
     	width: 50px;
     }
     
     .p-goods {
     	margin-top: 8px;
     	width: 565px;
     }
     /*图片*/
     img{
     	width: 100px;
     	height: 90px;
     }
     .p-img {
     	float: left;
     	border: 1px solid #ccc;
     	padding: 5px;
     }
     
     .p-msg {
     	float: left;
     	width: 210px;
     	margin: 0 10px;
     }
     
     .p-price {
     	width: 110px;
     }
     
     .quantity-form {
     	width: 80px;
     	height: 22px;
     }
     
     .p-num {
     	width: 170px;
     }
     
     .decrement,
     .increment {
     	float: left;
     	border: 1px solid #cacbcb;
     	height: 18px;
     	line-height: 18px;
     	padding: 1px 0;
     	width: 16px;
     	text-align: center;
     	color: #666;
     	background: #fff;
     	margin-left: -1px;
     }
     
     .itxt {
     	float: left;
     	border: 1px solid #cacbcb;
     	width: 42px;
     	height: 18px;
     	line-height: 18px;
     	text-align: center;
     	padding: 1px;
     	margin-left: -1px;
     	font-size: 12px;
     	font-family: verdana;
     	color: #333;
     	-webkit-appearance: none;
     }
     
     .p-sum {
     	font-weight: 700;
     	width: 145px;
     }
     /*购物清算*/
     .cart-floatbar {
     	height: 50px;
     	border: 1px solid #f0f0f0;
     	background: #fff;
     	position: relative;
     	margin-bottom: 50px;
     	line-height: 50px;
     	background: papayawhip;
     }
     
     .select-all {
     	float: left;
     	height: 18px;
     	line-height: 18px;
     	padding: 16px 0 16px 9px;
     	white-space: nowrap;
     }
     
     .select-all input {
     	vertical-align: middle;
     	display: inline-block;
     	margin-right: 5px;
     }
     
     .operation {
     	float: left;
     	width: 300px;
     	margin-left: 30px;
     }
     
     .clear-all {
     	font-weight: 700;
     	margin: 0 20px;
     }
     
     .toolbar-right {
     	float: right;
     }
     
     .amount-sum {
     	float: left;
     }
     
     .amount-sum em {
     	font-weight: 700;
     	color: #E2231A;
     	padding: 0 3px;
     }
     
     .price-sum {
     	float: left;
     	margin: 0 15px;
     }
     
     .price-sum em {
     	font-size: 16px;
     	color: #E2231A;
     	font-weight: 700;
     }
     
     .btn-area {
     	font-weight: 700;
     	width: 94px;
     	height: 52px;
     	line-height: 52px;
     	color: #fff;
     	text-align: center;
     	font-size: 18px;
     	font-family: "Microsoft YaHei";
     	background: #e54346;
     	overflow: hidden;
     }

#### HTML页面 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<link rel="stylesheet" type="text/css" href="css/car.css"/>
    	</head>
    	<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
    	<script src="js/my.js" type="text/javascript" charset="utf-8"></script>
    	<body>
         <div class="w">
             <div class="cart-warp">
                  
                  <div class="cart-thead">
                     <div class="t-checkbox">
                     	
                         <input type="checkbox" name="" id="" class="checkall"> 全选
                      </div>
                     <div class="t-goods">商品</div>
                     <div class="t-price">单价</div>
                     <div class="t-num">数量</div>
                     <div class="t-sum">小计</div>
                     <div class="t-action">操作</div>
                 </div>
                 
                 <div class="cart-item-list">
                     <div class="cart-item check-cart-item">
                     	
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" checked class="j-checkbox">
                         </div>
                         
                         <div class="p-goods">
                             <div class="p-img">
                                 <img src="img/p1.jpg" alt="">
                             </div>
                             <div class="p-msg">【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲</div>
                         </div>
                         
                         <div class="p-price">￥20.60</div>
                         <div class="p-num">
                             <div class="quantity-form">
                             	 
                                 <a href="javascript:;" class="decrement">-</a>
                                 
                                 <input type="text" class="itxt" value="1">
                                
                                <a href="javascript:;" class="increment">+</a>
                             </div>
                         </div>
                         
                         <div class="p-sum">￥20.60</div>
                         
                         <div class="p-action"><a href="javascript:;">删除</a></div>
                     </div>
                     <div class="cart-item">
                         <div class="p-checkbox">
                             <input type="checkbox" name="" id="" class="j-checkbox">
                         </div>
                         <div class="p-goods">
                             <div class="p-img">
                                 <img src="img/p2.jpg" alt="">
                             </div>
                             <div class="p-msg">【2000张贴纸】贴纸书 3-6岁 贴画儿童 贴画书全套12册 贴画 贴纸儿童 汽</div>
                         </div>
                         <div class="p-price">￥26.80</div>
                         <div class="p-num">
                             <div class="quantity-form">
                             	
                                <a href="javascript:;" class="decrement">-</a>
                                
                                <input type="text" class="itxt" value="1">
                                
                                <a href="javascript:;" class="increment">+</a>
                             </div>
                         </div>
                        <div class="p-sum">￥26.80</div>
                        
                         <div class="p-action"><a href="javascript:;">删除</a></div>
                     </div>
                     <div class="cart-item">
                         <div class="p-checkbox">
                             <input type="checkbox" name="" id="" class="j-checkbox">
                         </div>
                         <div class="p-goods">
                             <div class="p-img">
                                 <img src="img/p3.jpg" alt="">
                             </div>
                             <div class="p-msg">唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版 小学生二三年级课外阅读书籍</div>
                         </div>
                         <div class="p-price">￥28.80</div>
                         <div class="p-num">
                             <div class="quantity-form">
                                 <a href="javascript:;" class="decrement">-</a>
                                 <input type="text" class="itxt" value="1">
                                 <a href="javascript:;" class="increment">+</a>
                             </div>
                         </div>
                         <div class="p-sum">￥28.80</div>
                        <div class="p-action"><a href="javascript:;">删除</a></div>
                    </div>
                 </div>
                 
                 <div class="cart-floatbar">
                     <div class="select-all">
                         <input type="checkbox" name="" id="" class="checkall">全选
                     </div>
                    <div class="operation">
                    	 
                         <a href="javascript:;" class="remove-batch"> 删除选中的商品</a>
                         
                         <a href="javascript:;" class="clear-all">清空购物车</a>
                     </div>
                     <div class="toolbar-right">
                     	 
                         <div class="amount-sum">已经选<em>1</em>件商品</div>
                         
                         <div class="price-sum">总价： <em>￥20.60</em></div>
                         <div class="btn-area">去结算</div>
                    </div>
                 </div>  
             </div>  
        </div>  
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200923164726654.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200923165843366.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200923170011944.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200923170024436.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70