jquery购物车结算功能实现方法

2019-11-19 18:46:16

字体：大中小

来源：转载

供稿：网友

先看看购物车结算效果：

具体代码：

<!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('.am-num-text');  t.val(parseInt(t.val()) - 1);  if (t.val() <= 1) {   t.val(1);  }  TotalPrice();  });  // 数量加  $(".plus").click(function() {  var t = $(this).parent().find('.am-num-text');  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('checked', true); //店铺全选按钮被选中   if ($(".ShopCheck").length == $(".ShopCheck:checked").length) { //如果店铺被选中的数量等于所有店铺的数量   $("#AllCheck").prop('checked', true); //全选按钮被选中   TotalPrice();   } else {   $("#AllCheck").prop('checked', false); //else全选按钮不被选中   TotalPrice();   }  } else { //如果选中的商品不等于所有商品   Shops.prop('checked', false); //店铺全选按钮不被选中   $("#AllCheck").prop('checked', false); //全选按钮也不被选中   // 计算   TotalPrice();   // 计算  }  });  // 点击店铺按钮  $(".ShopCheck").change(function() {  if ($(this).prop("checked") == true) { //如果店铺按钮被选中   $(this).parents(".one-shop").find(".goods-check").prop('checked', true); //店铺内的所有商品按钮也被选中   if ($(".ShopCheck").length == $(".ShopCheck:checked").length) { //如果店铺被选中的数量等于所有店铺的数量   $("#AllCheck").prop('checked', true); //全选按钮被选中   TotalPrice();   } else {   $("#AllCheck").prop('checked', false); //else全选按钮不被选中   TotalPrice();   }  } else { //如果店铺按钮不被选中   $(this).parents(".one-shop").find(".goods-check").prop('checked', false); //店铺内的所有商品也不被全选   $("#AllCheck").prop('checked', false); //全选按钮也不被选中   TotalPrice();  }  });  // 点击全选按钮  $("#AllCheck").click(function() {  if ($(this).prop("checked") == true) { //如果全选按钮被选中   $(".goods-check").prop('checked', true); //所有按钮都被选中   TotalPrice();  } else {   $(".goods-check").prop('checked', 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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：基于Three.js插件制作360度全景图

下一篇：JavaScript微信定位功能实现方法