<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/cart.css" />
<script src="./js/jquery-3.5.1.js"></script>
</head>
<body>
<div class="cart-wrap">
<!-- 购物车头部 -->
<div class="cart-header">
<ul class="cart-lists">
<li class="cart-check">
<input type="checkbox" id="whole" class="whole-check" />
<label for="whole" class=""></label><span> 全选</span>
</li>
<li class="cart-con">商品</li>
<li class="cart-price">单价(元)</li>
<li class="cart-amount">数量</li>
<li class="cart-sum">小计</li>
<li class="cart-option">操作</li>
</ul>
</div>
<!-- 第一个店铺 -->
<!-- 购物车列表内容 -->
<div class="cart-box">
<div class="shop-info">
<div class="all-check fl">
<!-- 商铺的全选 -->
<input type="checkbox" id="showall1" class="shop-check" />
<label for="showall1"></label>
</div>
<div class="shop-name"><a href="">商城自营1</a></div>
</div>
<!-- 购物车列表内容 -->
<div class="cart-content">
<ul class="cart-lists">
<li class="cart-check">
<input type="checkbox" id="check1" class="son-check" />
<label for="check1"></label>
</li>
<li class="cart-con">
<div class="cart-img">
<a href=""><img src="images/cartS.jpg" alt="" /></a>
</div>
<div class="cart-text fs12">
表正品男表防水自动机械表经典钢带男士手表潮流休闲腕表5845
</div>
</li>
<li class="cart-price">
<p class="price">10</p>
</li>
<li class="cart-amount">
<div class="amount-box">
<button class="reduce" disabled>-</button>
<input type="text" value="1" />
<button class="add">+</button>
</div>
</li>
<li class="cart-sum">
<p class="price-sum">10</p>
</li>
<li class="cart-option">
<div class="cart-dele">删除</div>
</li>
</ul>
<ul class="cart-lists">
<li class="cart-check">
<input type="checkbox" id="check2" class="son-check" />
<label for="check2"></label>
</li>
<li class="cart-con">
<div class="cart-img">
<a href=""><img src="images/cartS.jpg" alt="" /></a>
</div>
<div class="cart-text fs12">
表正品男表防水自动机械表经典钢带男士手表潮流休闲腕表5845
</div>
</li>
<li class="cart-price">
<p class="price">20</p>
</li>
<li class="cart-amount">
<div class="amount-box">
<button class="reduce" disabled>-</button>
<input type="text" value="1" />
<button class="add">+</button>
</div>
</li>
<li class="cart-sum">
<p class="price-sum">20</p>
</li>
<li class="cart-option">
<div class="cart-dele">删除</div>
</li>
</ul>
</div>
</div>
<!-- 第二个店铺 -->
<div class="cart-box">
<div class="shop-info">
<div class="all-check fl">
<!-- 商铺的全选 -->
<input type="checkbox" id="showall2" class="shop-check" />
<label for="showall2"></label>
</div>
<div class="shop-name"><a href="">商城自营2</a></div>
</div>
<!-- 购物车列表内容 -->
<div class="cart-content">
<ul class="cart-lists">
<li class="cart-check">
<input type="checkbox" id="check3" class="son-check" />
<label for="check3"></label>
</li>
<li class="cart-con">
<div class="cart-img">
<a href=""><img src="images/cartS.jpg" alt="" /></a>
</div>
<div class="cart-text fs12">
表正品男表防水自动机械表经典钢带男士手表潮流休闲腕表5845
</div>
</li>
<li class="cart-price">
<p class="price">30</p>
</li>
<li class="cart-amount">
<div class="amount-box">
<button class="reduce" disabled>-</button>
<input type="text" value="1" />
<button class="add">+</button>
</div>
</li>
<li class="cart-sum">
<p class="price-sum">30</p>
</li>
<li class="cart-option">
<div class="cart-dele">删除</div>
</li>
</ul>
<ul class="cart-lists">
<li class="cart-check">
<input type="checkbox" id="check4" class="son-check" />
<label for="check4"></label>
</li>
<li class="cart-con">
<div class="cart-img">
<a href=""><img src="images/cartS.jpg" alt="" /></a>
</div>
<div class="cart-text fs12">
表正品男表防水自动机械表经典钢带男士手表潮流休闲腕表5845
</div>
</li>
<li class="cart-price">
<p class="price">40</p>
</li>
<li class="cart-amount">
<div class="amount-box">
<button class="reduce" disabled>-</button>
<input type="text" value="1" />
<button class="add">+</button>
</div>
</li>
<li class="cart-sum">
<p class="price-sum">40</p>
</li>
<li class="cart-option">
<div class="cart-dele">删除</div>
</li>
</ul>
</div>
</div>
<!-- 第三个店铺 -->
<div class="cart-box">
<div class="shop-info">
<div class="all-check fl">
<!-- 商铺的全选 -->
<input type="checkbox" id="showall3" class="shop-check" />
<label for="showall3"></label>
</div>
<div class="shop-name"><a href="">商城自营3</a></div>
</div>
<!-- 购物车列表内容 -->
<div class="cart-content">
<ul class="cart-lists">
<li class="cart-check">
<input type="checkbox" id="check5" class="son-check" />
<label for="check5"></label>
</li>
<li class="cart-con">
<div class="cart-img">
<a href=""><img src="images/cartS.jpg" alt="" /></a>
</div>
<div class="cart-text fs12">
表正品男表防水自动机械表经典钢带男士手表潮流休闲腕表5845
</div>
</li>
<li class="cart-price">
<p class="price">50</p>
</li>
<li class="cart-amount">
<div class="amount-box">
<button class="reduce" disabled>-</button>
<input type="text" value="1" />
<button class="add">+</button>
</div>
</li>
<li class="cart-sum">
JQuery实现购物车功能纯JQuery
需积分: 15 26 浏览量
2022-10-12
22:14:53
上传
评论
收藏 262KB RAR 举报
JQ购物车.rar （11个子文件） 
样式资料 css 
cart.css 4KB base.css 1KB images 
check.png 1017B checked.png 1KB bg.png 67KB
cartS.jpg 10KB
cart-购物车.html 11KB js cart.js 6KB jquery-3.5.1.js 281KB jquery-3.4.1.js 274KB jquery-3.4.1.min.js 86KB
评论0