jquery购物车结算功能实现方法

先看看购物车结算效果：
具体代码：
<！DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>购物车结算</title><meta name="description" content=""><meta name="keywords" content=""><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /><meta name="format-detection" content="telephone=no" /><meta name="renderer" content="webkit"><！--<！[endif]--><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><style>.shop-total,.all-total {height: 50px;line-height: 50px;font-weight: bold;color: #f00;float: left;} .one-shop,.all-total,.shop-total {width: 400px;} p {margin: 0;} .goods-check {width: 25px;height: 25px;margin-top: 5px;} .goods-msg,p,label {float: left;}</style> </head><body><！-- 一个店铺 --><div class="one-shop"><！-- 一个商品 --><div class="one-goods"> <div class="goods-msg"> <label for=""><input type="checkbox" class="goods-check GoodsCheck"> </label> <button type="button" class="minus">-</button> <input type="text" class="am-num-text" value="1" /> <button type="button" class="plus">+</button> </div> <p>商品单价：￥<span class="shop-total-amount GoodsPrice">20.00</span></p></div><！-- 一个商品 --><div class="one-goods"> <div class="goods-msg"> <label for=""><input type="checkbox" class="goods-check GoodsCheck"> </label> <button type="button" class="minus">-</button> <input type="text" class="am-num-text" value="1" /> <button type="button" class="plus">+</button> </div> <p>商品单价：￥<span class="shop-total-amount GoodsPrice">9.90</span></p></div><！-- 一个商品 --><div class="one-goods"> <div class="goods-msg "> <label for=""><input type="checkbox" class="goods-check GoodsCheck"> </label> <button type="button" class="minus">-</button> <input type="text" class="am-num-text" value="1" /> <button type="button" class="plus">+</button> </div> <p>商品单价：￥<span class="shop-total-amount GoodsPrice">10.00</span></p></div><！-- 店铺合计 --><div class="shop-total"> <label for=""> <input type="checkbox" class="goods-check ShopCheck">店铺全选 </label> <p>本店合计：￥<span class="shop-total-amount ShopTotal">0</span></p></div></div><！-- 一个店铺 --><div class="one-shop"><！-- 一个商品 --><div class="one-goods"> <div class="goods-msg"> <label for=""><input type="checkbox" class="goods-check GoodsCheck"> </label> <button type="button" class="minus">-</button> <input type="text" class="am-num-text" value="1" /> <button type="button" class="plus">+</button> </div> <p>商品单价：￥<span class="shop-total-amount GoodsPrice">30.00</span></p></div><！-- 一个商品 --><div class="one-goods"> <div class="goods-msg"> <label for=""><input type="checkbox" class="goods-check GoodsCheck"> </label> <button type="button" class="minus">-</button> <input type="text" class="am-num-text" value="1" /> <button type="button" class="plus">+</button> </div> <p>商品单价：￥<span class="shop-total-amount GoodsPrice">20.00</span></p></div><！-- 店铺合计 --><div class="shop-total"> <label for=""> <input type="checkbox" class="goods-check ShopCheck">店铺全选 </label> <p>本店合计：￥<span class="shop-total-amount ShopTotal">0</span></p></div></div><！-- 总计 --><div class="all-total"><label for=""> <input type="checkbox" class="goods-check" id="AllCheck">全选 </label><p>总价合计：￥<span class="shop-total-amount" id="AllTotal">0</span></p></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（）; //执行店铺全选的操作}）; 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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。