<!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. 禁止微信内的H5页面上下拖动

    客户需求:禁止微信内的H5页面上下拖动: 解决方案: 网上的答案几乎都是阻止默认事件,即: document.body.addEventListener('touchmove' , function( ...

  2. Spring WebFlux 响应式编程学习笔记(一)

    各位Javaer们,大家都在用SpringMVC吧?当我们不亦乐乎的用着SpringMVC框架的时候,Spring5.x又悄(da)无(zhang)声(qi)息(gu)的推出了Spring WebFl ...

  3. Python3 调试技巧 —— 死循环

    说下Python3不使用gdb的自身调试 前情提要:服务器莫名卡死,用网上的方法用gdb,下载了很多组件,包括那个libpython.py,都没什么用,看不到堆栈,也试了保存core文件等等 大事找官 ...

  4. 怎樣添加設置GridView，CheckBox全選功能

    GridView內CheckBox控件全選設置 不需要添加後台代碼操作,前端即可完成設置,如下: 前端代碼: 1.設置javascript. <html xmlns="http://w ...

  5. hbase snapshot 表备份/恢复

    snapshot其实就是一组metadata信息的集合,它可以让管理员将表恢复到以前的一个状态.snapshot并不是一份拷贝,它只是一个文件名的列表,并不拷贝数据.一个全的snapshot恢复以为着 ...

  6. C# 内插字符串与字符串复合格式

    var name = "Tom"; ; string aa = string.Format("name:{0},age:{1}", name, age);//字 ...

  7. JSX有感

    开发一个网页,我们要写视图部分HTML,也要写交互逻辑JS. 写JS时,不断翻看HTML,确保querySelector能取到期望的元素. 改HTML时,一个个排查JS文件,确保其没受影响. -- 类 ...

  8. python从开始到放弃的途中一直很菜的day13

    一直很菜的今天又来了两个新的概念,一个是装饰器,一个是推导式,装饰器好比女生出门前需要化妆的准备,推导式也称为生成式.先说装饰器吧,装饰器其实本质也是一个函数,并用@+函数名装饰到其他函数上,当这个其 ...

  9. 老白关于rac性能调优的建议（10gRAC）

    RAC应用设计方面需要在底层做很有设计.虽然ORACLE的售前人员总是说RAC的扩展性是透明的,只要把应用分到不同的节点,就可以平滑的扩展系统能力了.而事实上,RAC的CACHE FUSION机制决定 ...

  10. spring boot 自定义sql分页查询

    1.自定义sql查询分页 @Override public <T> Page<T> pageSQL(@Nonnull String sql, @Nonnull Pageable ...