简单的购物车

最新推荐文章于 2024-03-31 18:16:06 发布

负T

最新推荐文章于 2024-03-31 18:16:06 发布

阅读量479

点赞数

分类专栏： java基础

本文链接：https://blog.csdn.net/abzdasfad/article/details/99702740

版权

超简单的购物车，JQuery 版本为jquery-1.9.1.js
框架为老师给的，购物车的商品总数和总价根据是否选中而变化

jq和html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>我的购物车-京东商城</title>
		<link rel="stylesheet" type="text/css" href="css/cart.css"/>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function proCount(){//计算总价的函数
				var sumAll=$("#totalCount");//获取商品总数
				//var allMoney=$("span[name='singleGoodsSum']");//每件商品价格
				var money=$("#totalMoney");	//获取所有商品总共金额
				
				var goods=$("input[name='goods']");//获取多选框
				
				var count=0;//存储商品总数
				var sumMoney=0;//存储商品总价
				
				goods.each(function(){//判断每个多选框的状态
					if($(this).prop("checked")){//选中
						count++;//商品数量
						//将一件商品的总共价格  加入 所有商品的总价
						sumMoney+=Number($(this).parent().parent().children("li[class='w50']").children("span").html());
					}
				})
				sumAll.html(count);//写入商品总数
				money.html(sumMoney);//写入商品总价
			}
			$(function(){
				$("#all").click(function(){//上面的全选
					var all=$("#all").prop("checked");//获取全选是否被选中
					$("input[name='goods']").prop("checked",all);//选中则所有商品被选中
					proCount();//计算总价
					//alert($("input[name='goods']").length)
//					var sumAll=$("#totalCount");//
//					var allMoney=$("span[name='singleGoodsSum']");
//					var money=$("#totalMoney");//总计
					/*if(all==true){
						sumAll.html($("input[name='goods']").length)
						for(var i=0;i<allMoney.length;i++){
							var sing=allMoney.eq(i).html()
							money.html(Number(sing)+Number(money.html()))
						}
					}else{
						sumAll.html("0");
						money.html("0");
					}*/
					
				})
				
				$("input[name='all']").click(function(){//下面的全选
					var all=$("input[name='all']").prop("checked");
					$("input[name='goods']").prop("checked",all);

最低0.47元/天解锁文章

负T

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
简单的购物车

超简单的购物车，JQuery 版本为jquery-1.9.1.js框架为老师给的，购物车的商品总数和总价根据是否选中而变化jq和html代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>我的购物车-京东商城</title> &...
复制链接

扫一扫