<!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. C++，std::shared_future的使用

    今天给大家分享一个类似多线程任务的方法,具体如下: std::shared_future<int> tmp = std::async(p1,p2,p3); int tmpInt = tmp ...

  2. vue的表单编辑删除，保存取消功能

    过年回来第一篇博客,可能说的不是很清楚,而且心情可能也不是特别的high,虽然今天是元宵,我还在办公室11.30在加班,但就是想把写过的代码记下来,怕以后可能真的忘了.(心将塞未塞,欲塞未满) VUE ...

  3. Node.js安装及环境配置之Windows篇---完美，win7已测

    一.安装环境 1.本机系统:Windows 10 Pro(64位) (楼主win7,完美通过)2.Node.js:v6.9.2LTS(64位) (楼主版本2018-11-01下载的最新版本) 二.安装 ...

  4. Linux shell脚本中shift的用法说明

    shift命令用于对参数的移动(左移),通常用于在不知道传入参数个数的情况下依次遍历每个参数然后进行相应处理(常见于Linux中各种程序的启动脚本). 示例1:依次读取输入的参数并打印参数个数:run ...

  5. redis数据库的基础

    redis数据库 redis有以下三个特点 redis支持数据的持久化,可以将内存中的数据保存在磁盘中,重启的时候可以再次加载进行使用 redis不仅仅支持简单的key-value类型的数据,同时还提 ...

  6. 将Windows Server 2016 打造成工作站(20161030更新)

    将Windows Server 2016 打造成工作站(20161030更新) 一.基础设置 1.1.关闭自动弹窗:   「开始菜单」 - 「服务器管理器」 - 「仪表板」(或 Win + R或CMD ...

  7. 一个ELK日志检索实施案例

    figure:first-child { margin-top: -20px; } #write ol, #write ul { position: relative; } img { max-wid ...

  8. June. 25th 2018, Week 26th. Monday

    Change in all things is sweet. 有改变就会有美好. From Aristole. Change is always good, but embracing change ...

  9. Core官方DI剖析(1)--ServiceProvider类和ServiceCollection类

    前段时间看了蒋老师的Core文章,对于DI那一块感觉挺有意思,然后就看了一下Core官方DI的源码,这也算是第一个看得懂大部分源码的框架,虽然官方DI相对来说特别简单, 官方DI相对于其它框架(例如 ...

  10. python_while

    while 格式 while 条件 : pass 使用 while True : print("精忠报国") print("粉红的回忆") print(&quo ...