jQuery实现简单购物车页⾯
功能描述：
当全选按钮被按下时，所有商品的⼩复选框（以及另外⼀个全选按钮）的选中状态跟按下的全选按钮保持⼀致；当⽤户选中商品时，如果所有商品都被选中，就让全选按钮为选中状态；
⽤户可以点击 + - 增加或减少商品数量，也可以直接在⽂本框修改数量，数量修改后后边的⼩计也会相应改变；⽤户可以进⾏删除操作，删除单个商品、选中商品以及清理购物车；
当⽤户进⾏操作时，下⾯的已选商品件数以及总额也会有相应变化
准备⼯作：
⾸先将css样式以及jq、js⽂件引⼊，jq⽂件要放在js⽂件上边jquery字符串截取
<link rel="stylesheet" href="css/car.css">
<script src="js/jquery.min.js"></script>
<script src="js/car.js"></script>
HTML代码及CSS样式：
1<body>
2<div class="w">
3<div class="cart-warp">
4<!-- 头部全选模块 -->
5<div class="cart-thead">
6<div class="t-checkbox">
7<input type="checkbox" name="" id="" class="checkall">全选
8</div>
9<div class="t-goods">商品</div>
10<div class="t-price">单价</div>
11<div class="t-num">数量</div>
12<div class="t-sum">⼩计</div>
13<div class="t-action">操作</div>
14</div>
15<!-- 商品详细模块 -->
16<div class="cart-item-list">
17<div class="cart-item check-cart-item">
18<div class="p-checkbox">
19<input type="checkbox" name="" id="" checked class="j-checkbox">
20</div>
21<div class="p-goods">
22<div class="p-img">
23<img src="img/p1.jpg" alt="">
24</div>
25<div class="p-msg">【5本26.8元】经典⼉童⽂学彩图青少版⼋⼗天环游地球中学⽣语⽂教学⼤纲</div>
26</div>
27<div class="p-price">￥12.60</div>
28<div class="p-num">
29<div class="quantity-form">
30<a href="javascript:;" class="decrement">-</a>
31<input type="text" class="itxt" value="1">
32<a href="javascript:;" class="increment">+</a>
33</div>
34</div>
35<div class="p-sum">￥12.60</div>
36<div class="p-action"><a href="javascript:;">删除</a></div>
37</div>
38<div class="cart-item">
39<div class="p-checkbox">
40<input type="checkbox" name="" id="" class="j-checkbox">
41</div>
42<div class="p-goods">
43<div class="p-img">
44<img src="img/p2.jpg" alt="">
45</div>
46<div class="p-msg">【2000张贴纸】贴纸书 3-6岁贴画⼉童贴画书全套12册贴画贴纸⼉童汽</div>
47</div>
48<div class="p-price">￥24.80</div>
49<div class="p-num">
50<div class="quantity-form">
51<a href="javascript:;" class="decrement">-</a>
52<input type="text" class="itxt" value="1">
54</div>
55</div>
56<div class="p-sum">￥24.80</div>
57<div class="p-action"><a href="javascript:;">删除</a></div>
58</div>
59<div class="cart-item">
60<div class="p-checkbox">
61<input type="checkbox" name="" id="" class="j-checkbox">
62</div>
63<div class="p-goods">
64<div class="p-img">
65<img src="img/p3.jpg" alt="">
66</div>
67<div class="p-msg">唐诗三百⾸+成语故事全2册⼀年级课外书精装注⾳⼉童版⼩学⽣⼆三年级课外阅读书籍</div> 68</div>
69<div class="p-price">￥29.80</div>
70<div class="p-num">
71<div class="quantity-form">
72<a href="javascript:;" class="decrement">-</a>
73<input type="text" class="itxt" value="1">
74<a href="javascript:;" class="increment">+</a>
75</div>
76</div>
77<div class="p-sum">￥29.80</div>
78<div class="p-action"><a href="javascript:;">删除</a></div>
79</div>
80</div>
81<!-- 结算模块 -->
82<div class="cart-floatbar">
83<div class="select-all">
84<input type="checkbox" name="" id="" class="checkall">全选
85</div>
86<div class="operation">
87<a href="javascript:;" class="remove-batch">删除选中的商品</a>
88<a href="javascript:;" class="clear-all">清理购物车</a>
89</div>
90<div class="toolbar-right">
91<div class="amount-sum">已经选<em>1</em>件商品</div>
92<div class="price-sum">总价：<em>￥12.60</em></div>
93<div class="btn-area">去结算</div>
94</div>
95</div><!-- cart-floatbar end -->
96</div><!-- cart-warp end -->
97</div><!-- w end -->
98</body>
car.html
1* {
2 margin: 0;
3 padding: 0
4 }
5em,
6i {
7 font-style: normal;
8 }
9li {
10 list-style: none;
11 }
12a {
13 color: #666;
14 text-decoration: none;
15 }
16a:hover {
17 color: #e33333;
18 }
19body {
20 font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
21 color: #666
22 }
23.w {
24 width: 1200px;
25 margin: 0 auto;
26 }
27.cart-thead {
28 height: 32px;
29 line-height: 32px;
30 margin: 5px 0 10px;
31 padding: 5px 0;
32 background: #f3f3f3;
33 border: 1px solid #e9e9e9;
34 border-top: 0;
37.cart-thead>div,
38.cart-item>div {
39 float: left;
40 }
41.t-checkbox,
42.p-checkbox {
43 height: 18px;
44 line-height: 18px;
45 padding-top: 7px;
46 width: 122px;
47 padding-left: 11px;
48 }
49.t-goods {
50 width: 400px;
51 }
52.t-price {
53 width: 120px;
54 padding-right: 40px;
55 text-align: right;
56 }
57.t-num {
58 width: 150px;
59 text-align: center;
60 }
61.t-sum {
62 width: 100px;
63 text-align: right;
64 }
65.t-action {
66 width: 130px;
67 text-align: right;
68 }
69.cart-item {
70 height: 160px;
71 border-style: solid;
72 border-width: 2px 1px 1px;
73 border-color: #aaa #f1f1f1 #f1f1f1;
74 background: #fff;
75 padding-top: 14px;
76 margin: 15px 0;
77 }
78.check-cart-item {
79 background: #fff4e8;
80 }
81.p-checkbox {
82 width: 50px;
83 }
84.p-goods {
85 margin-top: 8px;
86 width: 565px;
87 }
88.p-img {
89 float: left;
90 border: 1px solid #ccc;
91 padding: 5px;
92 }
93.p-msg {
94 float: left;
95 width: 210px;
96 margin: 0 10px;
97 }
98.p-price {
99 width: 110px;
100 }
101.quantity-form {
102 width: 80px;
103 height: 22px;
104 }
105.p-num {
106 width: 170px;
107 }
108.decrement,
109.increment {
110 float: left;
111 border: 1px solid #cacbcb;
112 height: 18px;
113 line-height: 18px;
114 padding: 1px 0;
115 width: 16px;
116 text-align: center;
117 color: #666;
118 background: #fff;
121.itxt {
122 float: left;
123 border: 1px solid #cacbcb; 124 width: 42px;
125 height: 18px;
126 line-height: 18px;
127 text-align: center;
128 padding: 1px;
129 margin-left: -1px;
130 font-size: 12px;
131 font-family: verdana;
132 color: #333;
133 -webkit-appearance: none; 134 }
135.p-sum {
136 font-weight: 700;
137 width: 145px;
138 }
139.cart-floatbar {
140 height: 50px;
141 border: 1px solid #f0f0f0;
142 background: #fff;
143 position: relative;
144 margin-bottom: 50px;
145 line-height: 50px;
146 }
147.select-all {
148 float: left;
149 height: 18px;
150 line-height: 18px;
151 padding: 16px 0 16px 9px; 152 white-space: nowrap;
153 }
154.select-all input {
155 vertical-align: middle;
156 display: inline-block;
157 margin-right: 5px;
158 }
159.operation {
160 float: left;
161 width: 200px;
162 margin-left: 40px;
163 }
164.clear-all {
165 font-weight: 700;
166 margin: 0 20px;
167 }
169 float: right;
170 }
171.amount-sum {
172 float: left;
173 }
174.amount-sum em {
175 font-weight: 700;
176 color: #E2231A;
177 padding: 0 3px;
178 }
179.price-sum {
180 float: left;
181 margin: 0 15px;
182 }
183.price-sum em {
184 font-size: 16px;
185 color: #E2231A;
186 font-weight: 700;
187 }
188.btn-area {
189 font-weight: 700;
190 width: 94px;
191 height: 52px;
192 line-height: 52px;
193 color: #fff;
194 text-align: center;
195 font-size: 18px;
196 font-family: "Microsoft YaHei"; 197 background: #e54346;
198 overflow: hidden;
199 }
car.css
具体功能实现：
1. 当全选按钮改变时，让⼩复选框按钮和全选按钮保持⼀致。
全选按钮被选中时，让所有商品背景⾊改变，反之则去掉背景⾊，同时也要改变已选商品件数和总额
1 $(".checkall").change(function() {
2// 当全选按钮改变时，让⼩复选框按钮和全选按钮保持⼀致（隐式迭代，不需要循环遍历）
3 $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
4 getSum(); // 计算总额函数
5// 添加背景
6// 判断是否是选中状态，是的话添加check-cart-item类，没有就移除
7if($(this).prop("checked")) {
8 $(".cart-item").addClass("check-cart-item");
9 } else {
10 $(".cart-item").removeClass("check-cart-item");
11 }
12 })
2. 当⼩复选框按钮改变时，判断是否所有的⼩按钮都是选中状态，是的话让全选按钮为选中状态，否则为未选中状态。通过已选复选框的个数是否等于所有⼩复选框的总个数来判断，同时也要改变背景⾊和总额模块
1 $(".j-checkbox").change(function() {
2if($(".j-checkbox:checked").length === $(".j-checkbox").length) {
3 $(".checkall").prop("checked", true);
4 } else {
5 $(".checkall").prop("checked", false);
6 }
7 getSum();
8// 当⼩复选框为选中状态时，改变背景颜⾊（添加check-cart-item类）
9if($(this).prop("checked")) {
10 $(this).parents(".cart-item").addClass("check-cart-item");
11 } else {
12 $(this).parents(".cart-item").removeClass("check-cart-item");
13 }
14 })
3. ⽤户可以通过点击加减号或者直接修改⽂本框来修改商品数量，后边的⼩计也做相应的变化
①点击+按钮，⽂本框数字加⼀，⼩计加价。
先把原来的数量获取过来，然后在原来的基础上加⼀再赋给⽂本框；把单价获取过来，乘以⽂本框数量就是⼩计
1 $(".increment").click(function() {
2var n = $(this).siblings(".itxt").val();
3 n++;
4 $(this).siblings(".itxt").val(n);
5// ⼩计模块
6// num为获取过来的单价，⽤substr()截取字符串把前边的￥去掉
7var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
8// toFixed(2)保留两位⼩数
9var price = (num * n).toFixed(2);
10 $(this).parents(".p-num").siblings(".p-sum").html("￥" + price);
11 getSum();
12 })
②点击-按钮，⽂本框数字减⼀，⼩计减价。
具体⽅法同上，有⼀点不⼀样是商品数量不能⼩于1，要判断⼀下
1 $(".decrement").click(function() {
2var n = $(this).siblings(".itxt").val();
3 n <= 1 ? n : n--;
4 $(this).siblings(".itxt").val(n);
5// ⼩计模块
6var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
7// toFixed(2)保留两位⼩数
8var price = (num * n).toFixed(2);
9 $(this).parents(".p-num").siblings(".p-sum").html("￥" + price);
10 getSum();
11 })
③直接修改⽂本框改变数量
1 $(".itxt").change(function() {
2var n = $(this).val();
3var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
4// toFixed(2)保留两位⼩数
5var price = (num * n).toFixed(2);
6 $(this).parents(".p-num").siblings(".p-sum").html("￥" + price);
7 getSum();
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论