<!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. （四） Keras Dropout和正则化的使用

    视频学习来源 https://www.bilibili.com/video/av40787141?from=search&seid=17003307842787199553 笔记 使用drop ...

  2. Android Material Design控件使用（一）——ConstraintLayout 约束布局

    参考文章: 约束布局ConstraintLayout看这一篇就够了 ConstraintLayout - 属性篇 介绍 Android ConstraintLayout是谷歌推出替代PrecentLa ...

  3. 章节十、3-CSS Selector---用CSS Selector - ID定位元素

    一.如果元素的 ID 不唯一,或者是动态的,或者 name 以及 linktext 属性值也不唯一,对于这样的元素,我们 就需要考虑用 xpath或者css selector 来查找元素了,然后再对元 ...

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

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

  5. 好代码是管出来的——C#的代码规范

    代码是软件开发过程的产物,代码的作用是通过编译器编译后运行,达到预期的效果(功能.稳定性.安全性等等),而另外一个重要作用是给人阅读.对于机器来说只要代码正确就能够正确的运行程序,但是人不同,如果代码 ...

  6. Not on FX application thread; currentThread = AWT-EventQueue-0的解决方法

    swing awt跑javafx报了这问题 Not on FX application thread; currentThread = AWT-EventQueue-0 解决方法 Platform.r ...

  7. winserver-记录共享文件夹操作日志

    abstract 1.在共享文件夹上开启审计. 2.在日志中查看操作记录. 开启审计 共享文件夹属性 选择审计 添加审计用户 选择用户及审计事件 日志查看 运行eventvwr 在windowslog ...

  8. Vue组织架构图组件

    vue-tree-chart   :deciduous_tree: Vue2树形图组件 安装 npm i vue-tree-chart --save 使用 in template: <TreeC ...

  9. java网络爬虫基础学习（四）

    jsoup的使用 jsoup介绍 jsoup是一款Java的HTML解析器,可直接解析某个URL地址.HTML文本内容.它提供了一套非常省力的API,可通过DOM,css以及类似于Jquery的操作方 ...

  10. 【spring源码分析】IOC容器初始化（九）

    前言:上篇文章末尾提到createBeanInstance方法中使用工厂方法实例化Bean对象,本文将对该方法进行分析. AbstractAutowireCapableBeanFactory#inst ...