jquery购物车结算功能实现方法-PHP开发-php.cn

具体代码：
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html> 
<html lang="en"> 
   
<head> 
 <meta charset="utf-8"> 
 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 <title>购物车结算</title> 
 <meta name="description" content=""> 
 <meta name="keywords" content=""> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> 
 <meta name="format-detection" content="telephone=no" /> 
 <meta name="renderer" content="webkit"> 
 <!--<![endif]-->
 <meta name="apple-mobile-web-app-capable" content="yes"> 
 <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
 <style> 
 .shop-total, 
 .all-total { 
 height: 50px; 
 line-height: 50px; 
 font-weight: bold; 
 color: #f00; 
 float: left; 
 } 
   
 .one-shop, 
 .all-total, 
 .shop-total { 
 width: 400px; 
 } 
   
 p { 
 margin: 0; 
 } 
   
 .goods-check { 
 width: 25px; 
 height: 25px; 
 margin-top: 5px; 
 } 
   
 .goods-msg, 
 p, 
 label { 
 float: left; 
 } 
 </style> 
</head> 
   
<body> 
 <!-- 一个店铺 -->
 <div class="one-shop"> 
 <!-- 一个商品 -->
 <div class="one-goods"> 
  <div class="goods-msg"> 
  <label for=""> 
   <input type="checkbox" class="goods-check GoodsCheck"> 
  </label> 
  <button type="button" class="minus">-</button> 
  <input type="text" class="am-num-text" value="1" /> 
  <button type="button" class="plus">+</button> 
  </div> 
  <p>商品单价：￥<span class="shop-total-amount GoodsPrice">20.00</span></p> 
 </div> 
 <!-- 一个商品 -->
 <div class="one-goods"> 
  <div class="goods-msg"> 
  <label for=""> 
   <input type="checkbox" class="goods-check GoodsCheck"> 
  </label> 
  <button type="button" class="minus">-</button> 
  <input type="text" class="am-num-text" value="1" /> 
  <button type="button" class="plus">+</button> 
  </div> 
  <p>商品单价：￥<span class="shop-total-amount GoodsPrice">9.90</span></p> 
 </div> 
 <!-- 一个商品 -->
 <div class="one-goods"> 
  <div class="goods-msg "> 
  <label for=""> 
   <input type="checkbox" class="goods-check GoodsCheck"> 
  </label> 
  <button type="button" class="minus">-</button> 
  <input type="text" class="am-num-text" value="1" /> 
  <button type="button" class="plus">+</button> 
  </div> 
  <p>商品单价：￥<span class="shop-total-amount GoodsPrice">10.00</span></p> 
 </div> 
 <!-- 店铺合计 -->
 <div class="shop-total"> 
  <label for=""> 
  <input type="checkbox" class="goods-check ShopCheck">店铺全选 </label> 
  <p>本店合计：￥<span class="shop-total-amount ShopTotal">0</span></p> 
 </div> 
 </div> 
 <!-- 一个店铺 -->
 <div class="one-shop"> 
 <!-- 一个商品 -->
 <div class="one-goods"> 
  <div class="goods-msg"> 
  <label for=""> 
   <input type="checkbox" class="goods-check GoodsCheck"> 
  </label> 
  <button type="button" class="minus">-</button> 
  <input type="text" class="am-num-text" value="1" /> 
  <button type="button" class="plus">+</button> 
  </div> 
  <p>商品单价：￥<span class="shop-total-amount GoodsPrice">30.00</span></p> 
 </div> 
 <!-- 一个商品 -->
 <div class="one-goods"> 
  <div class="goods-msg"> 
  <label for=""> 
   <input type="checkbox" class="goods-check GoodsCheck"> 
  </label> 
  <button type="button" class="minus">-</button> 
  <input type="text" class="am-num-text" value="1" /> 
  <button type="button" class="plus">+</button> 
  </div> 
  <p>商品单价：￥<span class="shop-total-amount GoodsPrice">20.00</span></p> 
 </div> 
 <!-- 店铺合计 -->
 <div class="shop-total"> 
  <label for=""> 
  <input type="checkbox" class="goods-check ShopCheck">店铺全选 </label> 
  <p>本店合计：￥<span class="shop-total-amount ShopTotal">0</span></p> 
 </div> 
 </div> 
 <!-- 总计 -->
 <div class="all-total"> 
 <label for=""> 
  <input type="checkbox" class="goods-check" id="AllCheck">全选 </label> 
 <p>总价合计：￥<span class="shop-total-amount" id="AllTotal">0</span></p> 
 </div> 
 <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script> 
 <script> 
 // 数量减 
 $(".minus").click(function() { 
 var t = $(this).parent().find(&#39;.am-num-text&#39;); 
 t.val(parseInt(t.val()) - 1); 
 if (t.val() <= 1) { 
  t.val(1); 
 } 
 TotalPrice(); 
 }); 
 // 数量加 
 $(".plus").click(function() { 
 var t = $(this).parent().find(&#39;.am-num-text&#39;); 
 t.val(parseInt(t.val()) + 1); 
 if (t.val() <= 1) { 
  t.val(1); 
 } 
 TotalPrice(); 
 }); 
 // 点击商品按钮 
 $(".GoodsCheck").click(function() { 
 var goods = $(this).closest(".one-shop").find(".GoodsCheck"); //获取本店铺的所有商品 
 var goodsC = $(this).closest(".one-shop").find(".GoodsCheck:checked"); //获取本店铺所有被选中的商品 
 var Shops = $(this).closest(".one-shop").find(".ShopCheck"); //获取本店铺的全选按钮 
 if (goods.length == goodsC.length) { //如果选中的商品等于所有商品 
  Shops.prop(&#39;checked&#39;, true); //店铺全选按钮被选中 
  if ($(".ShopCheck").length == $(".ShopCheck:checked").length) { //如果店铺被选中的数量等于所有店铺的数量 
  $("#AllCheck").prop(&#39;checked&#39;, true); //全选按钮被选中 
  TotalPrice(); 
  } else { 
  $("#AllCheck").prop(&#39;checked&#39;, false); //else全选按钮不被选中 
  TotalPrice(); 
  } 
 } else { //如果选中的商品不等于所有商品 
  Shops.prop(&#39;checked&#39;, false); //店铺全选按钮不被选中 
  $("#AllCheck").prop(&#39;checked&#39;, false); //全选按钮也不被选中 
  // 计算 
  TotalPrice(); 
  // 计算 
 } 
 }); 
 // 点击店铺按钮 
 $(".ShopCheck").change(function() { 
 if ($(this).prop("checked") == true) { //如果店铺按钮被选中 
  $(this).parents(".one-shop").find(".goods-check").prop(&#39;checked&#39;, true); //店铺内的所有商品按钮也被选中 
  if ($(".ShopCheck").length == $(".ShopCheck:checked").length) { //如果店铺被选中的数量等于所有店铺的数量 
  $("#AllCheck").prop(&#39;checked&#39;, true); //全选按钮被选中 
  TotalPrice(); 
  } else { 
  $("#AllCheck").prop(&#39;checked&#39;, false); //else全选按钮不被选中 
  TotalPrice(); 
  } 
 } else { //如果店铺按钮不被选中 
  $(this).parents(".one-shop").find(".goods-check").prop(&#39;checked&#39;, false); //店铺内的所有商品也不被全选 
  $("#AllCheck").prop(&#39;checked&#39;, false); //全选按钮也不被选中 
  TotalPrice(); 
 } 
 }); 
 // 点击全选按钮 
 $("#AllCheck").click(function() { 
 if ($(this).prop("checked") == true) { //如果全选按钮被选中 
  $(".goods-check").prop(&#39;checked&#39;, true); //所有按钮都被选中 
  TotalPrice(); 
 } else { 
  $(".goods-check").prop(&#39;checked&#39;, false); //else所有按钮不全选 
  TotalPrice(); 
 } 
 $(".ShopCheck").change(); //执行店铺全选的操作 
 }); 
   
 function TotalPrice() { 
 var allprice = 0; //总价 
 $(".one-shop").each(function() { //循环每个店铺 
  var oprice = 0; //店铺总价 
  $(this).find(".GoodsCheck").each(function() { //循环店铺里面的商品 
  if ($(this).is(":checked")) { //如果该商品被选中 
   var num = parseInt($(this).parents(".one-goods").find(".am-num-text").val()); //得到商品的数量 
   var price = parseFloat($(this).parents(".one-goods").find(".GoodsPrice").text()); //得到商品的单价 
   var total = price * num; //计算单个商品的总价 
   oprice += total; //计算该店铺的总价 
  } 
  $(this).closest(".one-shop").find(".ShopTotal").text(oprice.toFixed(2)); //显示被选中商品的店铺总价 
  }); 
  var oneprice = parseFloat($(this).find(".ShopTotal").text()); //得到每个店铺的总价 
  allprice += oneprice; //计算所有店铺的总价 
 }); 
 $("#AllTotal").text(allprice.toFixed(2)); //输出全部总价 
 } 
 </script> 
</body> 
   
</html>
Salin selepas log masuk