<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>购物车结算</title>

    <style>

        *{padding::0; margin:0; font-family:"微软雅黑"}

        .one-shop,.all-total{padding:20px; width:400px; margin:auto}

        .one-goods{height:35px; line-height:35px}

        .goods-msg,.goods-price{float:left; padding:0 10px 0 0}

        .goods-check{width:15px; height:15px}

        .am-num-text{width:50px; text-align:center}

        .shop-total,.all-total{height:50px; line-height:50px}

        .all-del{

            width: 400px;

            display: flex;

            margin: auto;

        }

        #AllDel{

            display: inline-block;

            background: #FF0000;

            color: #FFFFFF;

            width: 60px;

            height: 30px;

            line-height: 30px;

            text-align: center;

        }

    </style>

</head>

<body>

    <!-- 一个店铺 -->

    <div class="one-shop">

        <!-- 一个商品 -->

        <div class="one-goods">

            <div class="goods-msg">

                <input type="checkbox" class="goods-check GoodsCheck">

                <button type="button" class="minus">-</button>

                <input type="text" class="am-num-text" value="1"/>

                <button type="button" class="plus">+</button>

            </div>

            <div class="goods-price">

                单价：￥<span class="shop-total-amount GoodsPrice">20.00</span>

            </div>

        </div>

        <!-- 一个商品 -->

        <div class="one-goods">

            <div class="goods-msg">

                <input type="checkbox" class="goods-check GoodsCheck">

                <button type="button" class="minus">-</button>

                <input type="text" class="am-num-text" value="1"/>

                <button type="button" class="plus">+</button>

            </div>

            <div class="goods-price">

                单价：￥<span class="shop-total-amount GoodsPrice">9.90</span>

            </div>

        </div>

        <!-- 一个商品 -->

        <div class="one-goods">

            <div class="goods-msg ">

                <input type="checkbox" class="goods-check GoodsCheck">

                <button type="button" class="minus">-</button>

                <input type="text" class="am-num-text" value="1"/>

                <button type="button" class="plus">+</button>

            </div>

            <div class="goods-price">

                单价：￥<span class="shop-total-amount GoodsPrice">10.00</span>

            </div>

        </div>

        <!-- 店铺合计 -->

        <div class="shop-total">

            <input type="checkbox" class="goods-check ShopCheck">店铺全选&nbsp;&nbsp;&nbsp;&nbsp;

            本店合计：￥<span class="shop-total-amount ShopTotal">0</span>

        </div>

    </div>

    <!-- 一个店铺 -->

    <div class="one-shop">

        <!-- 一个商品 -->

        <div class="one-goods">

            <div class="goods-msg">

                <input type="checkbox" class="goods-check GoodsCheck">

                <button type="button" class="minus">-</button>

                <input type="text" class="am-num-text" value="1"/>

                <button type="button" class="plus">+</button>

            </div>

            <div class="goods-price">

                单价：￥<span class="shop-total-amount GoodsPrice">20.00</span>

            </div>

        </div>

        <!-- 一个商品 -->

        <div class="one-goods">

            <div class="goods-msg">

                <input type="checkbox" class="goods-check GoodsCheck">

                <button type="button" class="minus">-</button>

                <input type="text" class="am-num-text" value="1"/>

                <button type="button" class="plus">+</button>

            </div>

            <div class="goods-price">

                单价：￥<span class="shop-total-amount GoodsPrice">9.90</span>

            </div>

        </div>

        <!-- 一个商品 -->

        <div class="one-goods">

            <div class="goods-msg ">

                <input type="checkbox" class="goods-check GoodsCheck">

                <button type="button" class="minus">-</button>

                <input type="text" class="am-num-text" value="1"/>

                <button type="button" class="plus">+</button>

            </div>

            <div class="goods-price">

                单价：￥<span class="shop-total-amount GoodsPrice">10.00</span>

            </div>

        </div>

        <!-- 店铺合计 -->

        <div class="shop-total">

            <input type="checkbox" class="goods-check ShopCheck">店铺全选&nbsp;&nbsp;&nbsp;&nbsp;

            本店合计：￥<span class="shop-total-amount ShopTotal">0</span>

        </div>

    </div>

    <!-- 一个店铺 -->

    <div class="one-shop">

        <!-- 一个商品 -->

        <div class="one-goods">

            <div class="goods-msg">

                <input type="checkbox" class="goods-check GoodsCheck">

                <button type="button" class="minus">-</button>

                <input type="text" class="am-num-text" value="1"/>

                <button type="button" class="plus">+</button>

            </div>

            <div class="goods-price">

                单价：￥<span class="shop-total-amount GoodsPrice">20.00</span>

            </div>

        </div>

        <!-- 一个商品 -->

        <div class="one-goods">

            <div class="goods-msg">

                <input type="checkbox" class="goods-check GoodsCheck">

                <button type="button" class="minus">-</button>

                <input type="text" class="am-num-text" value="1"/>

                <button type="button" class="plus">+</button>

            </div>

            <div class="goods-price">

                单价：￥<span class="shop-total-amount GoodsPrice">9.90</span>

            </div>

        </div>

        <!-- 一个商品 -->

        <div class="one-goods">

            <div class="goods-msg ">

                <input type="checkbox" class="goods-check GoodsCheck">

                <button type="button" class="minus">-</button>

                <input type="text" class="am-num-text" value="1"/>

                <button type="button" class="plus">+</button>

            </div>

            <div class="goods-price">

                单价：￥<span class="shop-total-amount GoodsPrice">10.00</span>

            </div>

        </div>

        <!-- 店铺合计 -->

        <div class="shop-total">

            <input type="checkbox" class="goods-check ShopCheck">店铺全选&nbsp;&nbsp;&nbsp;&nbsp;

            本店合计：￥<span class="shop-total-amount ShopTotal">0</span>

        </div>

    </div>

    <!-- 总计 -->

    <div class="all-total">

        <input type="checkbox" class="goods-check" id="AllCheck">全选&nbsp;&nbsp;&nbsp;&nbsp;

        总价合计：￥<span class="shop-total-amount" id="AllTotal">0</span>

    </div>

    <!--删除-->

    <div class="all-del">

        <a id="AllDel">删除</a>

    </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(); //执行店铺全选的操作

  });

  //点击删除

  $('#AllDel').click(function(){

     $(".GoodsCheck:checked").each(function() { // 遍历选中的商品checkbox

        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); //店铺全选按钮不被选中

            $(this).closest(".one-shop").remove();

            TotalPrice();

         } else { //如果选中的商品不等于所有商品

         var n = $(this).parents('.one-goods').index(); // 获取checkbox所在行的顺序

            $(".one-shop").find(".one-goods:eq("+n+")").remove();

            TotalPrice();

         }

     });

  });

  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>

最新文章

  1. 压力测试相关之ab命令
  2. checkbox点击后出现div
  3. Frameset的使用
  4. python mysql 更新和插入数据无效
  5. SAM4E单片机之旅——15、触屏输入与SPI通信
  6. SilverLight 条码 扫描枪 MVVM(转载)
  7. leetcode 121. Best Time to Buy and Sell Stock ----- java
  8. XML CDATA(Mybatis mapper and XML)
  9. 04737_C++程序设计_第7章_类模板与向量
  10. WPF Image Binding Uri Source 失败解决办法
  11. Jsp——response对象
  12. 4.Apache Spark的工作原理
  13. 基于VUE的九宫格抽奖功能
  14. 如何卸载Centos自带jdk
  15. Linux从入门到进阶全集——【第十四集：Shell编程】
  16. DSAPI多功能组件编程应用-反射相关
  17. [转]Mysql FROM_UNIXTIME as UTC
  18. luogu3107
  19. Laravel学习笔记之Session源码解析(中)
  20. Eclipse Axis2 插件将代码生成WSDL指南

热门文章

  1. Salesforce的对象和字段
  2. 突破瓶颈，再出发 - PM过程能力成熟度5级
  3. webpack4介绍
  4. EF Code First 连接MySql
  5. 【java学习】Intelli Idea集成开发工具的使用
  6. SpringBoot搭建
  7. jcrop2.X 取消选框
  8. SQL 行转列的运用
  9. 多线程手写Future模式
  10. UltraEdit文本行数多变一和一边多