«

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使用$.ajax进行即时验证实例详解
2 JavaScript italics方法入门实例（把字符串显示为斜体）
3 表单验证插件Validation应用的实例讲解
4 node.js中的console.dir方法使用说明
5 Javascript页面跳转常见实现方式汇总
6 vue2怎么自定义组件通过rollup配置发布到npm
7 jquery中document指的是什么
8 js简单判断移动端系统的方法
9 浅谈Javascript面向对象编程
10 理解javascript对象继承

日历

标签

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

搜索

最新文章

热门文章