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

jquery-防多店铺购物车结算全选，单选，及删除，价格计算的更多相关文章

  1. Flutter实战视频-移动电商-60.购物车_全选按钮的交互效果制作

    60.购物车_全选按钮的交互效果制作 主要做全选和复选框的这两个功能 provide/cart.dart 业务逻辑写到provide里面 先持久化取出来字符串,把字符串编程list.循环list ca ...

  2. vue开发购物车，解决全选单选问题

    实现全选单选,在vue中无法通过this获取input中的checkbox的checked属性,但是可以通过vue对input的特殊方式v-model来实现对应数据的绑定,同样也可以通过这种方式实现购 ...

  3. php--jquery操作全选、批量删除、加减行

  4. Jquery全选单选功能

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx. ...

  5. jQuery实现Checkbox中项目开发全选全不选的使用

    <html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...

  6. jQuery实现checkbox全选反选及删除等操作

    1.list.html 说明:用checkbox数组Check[]存放每一行的ID值 <div id="con"> <table width="100% ...

  7. Android中购物车的全选、反选、问题和计算价格

    此Demo主要解决的是购物车中的全选,反选计算价格和选中的条目个数的问题,当选中几条时,点击反选,会把当先选中的变为不选中,把不选中的变为选中.点击全选会全部选中,再次点击时,变为全部不选中. //- ...

  8. 关于jquery全选反选 批量删除的一点心得

    废话不多说直接上代码: 下面是jsp页面的html代码: <table id="contentTable" class=""> <thead& ...

  9. 11.8 开课二个月零四天 （Jquery取属性值，做全选，去空格）

    1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

随机推荐

  1. 解决PostGIS打开shp文件输入输出模块出现"找不到文件libintl-9.dll"的问题

    找到shp2pgsql-gui.exe这个程序的目录 复制一份libintl-8.dll副本,改名为libintl-9.dll即可.

  2. java.lang.IllegalArgumentException: Called attach on a child which is not detached: ViewHolder

    转载请标明出处,维权必究:https://www.cnblogs.com/tangZH/p/10116298.html 在项目过程中出现了上述错误. 会出现这样的错误是在我使用: notifyItem ...

  3. (办公)springboot配置表单验证@Valid

    项目用到了springboot,本来很高兴,但是项目里什么东西都没有,验证,全局异常这些都需要自己区配置.最近springboot用的还是蛮多的,我还是做事情,把经验发表一下. SpringBoot提 ...

  4. 使用Log4Net进行错误日志记录

    http://blog.csdn.net/zdw_wym/article/details/48802821

  5. Python 之网络式编程

    一 客户端/服务器架构 即C/S架构,包括 1.硬件C/S架构(打印机) 2.软件B/S架构(web服务) C/S架构与Socket的关系: 我们学习Socket就是为了完成C/S的开发 二 OSI七 ...

  6. Linux学习历程——Centos 7 diff命令

    一.命令介绍 diff命令用于比较文本差异. diff以逐行的方式,比较文本文件的异同处.如果指定要比较目录,则diff会比较目录中相同文件名的文件,但不会比较其中子目录. ------------- ...

  7. zabbix利用SNMPTrap接收交换机主动告警

    zabbix接收trap的工作流程: snmptrapd 收到trap snmptrapd将trap传递给SNMPTT或调用Perl接收器 SNMPTT或Perl trap接收器解析,格式化并将tra ...

  8. 用css 添加手状样式,鼠标移上去变小手,变小手

    用css 添加手状样式,鼠标移上去变小手,变小手 cursor:pointer; 用JS使鼠标变小手onmouseover(鼠标越过的时候) onmouseover="this.style. ...

  9. 【心得】Lattice后端使用经验小结（ECP5UM，DDR3，Diamond3.10，Reveal逻辑分析）

    [博客导航] [导航]FPGA相关 背景 下边的内容,适合初次使用Lattice的.具备FPGA开发经验的同学. 1.初次使用,还真遇到不少的坑,Lattice的工具也有不少优缺点,通过总结,希望能缩 ...

  10. 《重构》的读书笔记–方法列表

    第5章 重构列表 5.1 重构的记录格式103 5.2 寻找引用点105 5.3 这些重构手法有多成熟106 第6章 重新组织函数 6.1 (P110)Extract Method(提炼函数) 6.2 ...