先看看购物车结算效果:

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="/UploadFiles/2021-04-02/jquery-2.2.0.min.js">

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
jquery购物车结算,jQuery结算功能,jquery购物车结算功能

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“jquery购物车结算功能实现方法”

暂无“jquery购物车结算功能实现方法”评论...