html 代码
- <!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;
本店合计:<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;
本店合计:<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;
本店合计:<span class="shop-total-amount ShopTotal">0</span>
- </div>
- </div>
- <!-- 总计 -->
- <div class="all-total">
- <input type="checkbox" class="goods-check" id="AllCheck"> 全选 & 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>
来源: http://www.qdfuns.com/article/37255/2b8db8cdd575966df2a84149dbd43234.html