«

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

时间：2024-3-2 08:06     作者：韩俊     分类： Javascript

先看看购物车结算效果：

具体代码：

<!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>

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

标签: javascript

热门推荐

1 jQuery在ie6下无法设置select选中的解决方法详解
2 JavaScript 学习笔记（十四） 正则表达式
3 使用AngularJS和PHP的Laravel实现单页评论的方法
4 jQuery打字效果实现方法(附demo源码下载)
5 JavaScript在网页中画圆的函数arc使用方法
6 使用upstart把nodejs应用封装为系统服务实例
7 怎么使用jQuery javascript获得网页的高度与宽度
8 详解JavaScript中this关键字的用法
9 超赞的jQuery图片滑块动画特效代码汇总
10 解决vue组件中使用v-for出现告警问题及v for指令介绍

日历

标签

hbase maven eclipse sybase PostgreSQL spring emcache oracle mongodb redis nginx golang java vue android ios mysql linux 微信小程序 css html php教程 javascript python php

搜索

最新文章

热门文章