手机端一部分用flex布局写在这里看着不爽把css全部删除了。只留下js结算功能js很臃肿，请留下宝贵意见提升性能。改天上多店铺购物车手机端原版截图
效果图：
图（1）全部勾选的效果
图（2）勾选，点击“删除”效果
代码如下：
<!DOCTYPE html> <html lang="zh-cn"> <head> <title>购物车</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta content="yes" /> <meta content="black" /> <!----确保适当的绘制和触屏缩放,让网页的宽度自动适应手机屏幕的宽度----> <meta content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/> <!----关键词搜索----> <meta content=""> <!----描述网页的核心内容，通常为网页内容的摘要信息----> <meta content="" /> <meta content="telephone=no" /> <meta content="email=no" /> <link href="https://www.jb51.net/css/basic.css" > <link href="https://www.jb51.net/css/css.css" > </head> <style> .flex-center{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -o-box; display: box; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -o-box-pack: center; box-pack: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -o-box-align: center; box-align: center; } .kong{ font-size: 0.3rem; height: 80vh; color: #333333; } .kong a { color: #333333; text-decoration: double; } </style> <body> <main> <dl> <dt><label><input type="checkbox" value=""></label></dt> <dd>零食 <span>￥<span>1.00</span></span> <span> <input type="button" value="-"><input type="text" value="1"><input type="button" value="+"> </span></dd> </dl> <dl> <dt><label><input type="checkbox" value=""></label></dt> <dd>零食 <span>￥<span>1.00</span></span> <span> <input type="button" value="-"><input type="text" value="1"><input type="button" value="+"> </span></dd> </dl> <section> <button type="button">删除</button><p>共 <span>0</span> 件商品 共计：￥<span>0.00</span></p> </section> </main> <footer> <form action="#" method="get"> <p><label><input type="checkbox" value=""></label><span>全选</span> <span><span >合计:￥<b>0.00</b></span><span>不含邮费</span></span> <button type="button">结算(<span>0</span>)</button> </p> </form> </footer> <script src="https://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <script> $(function(){ $(".shuliang").keyup(function() { if (isNaN($(this).val()) || parseInt($(this).val()) < 1 || $(this).val()=="") { $(this).val("1"); } }); // 数量加 $(".jia").click(function(){ var t = $(this).parent().find(".shuliang"); t.val(parseInt(t.val())+1); var n = parseInt($(this).siblings(".shuliang").val()); //得到商品的数量 var p = parseFloat($(this).parent().siblings().children(".gwc_dd_p").text()); //得到商品的单价 var tot = p * n; //计算单个商品的总价 TotalPrice(); }); // 数量减 $(".jian").click(function(){ var t = $(this).parent().find(".shuliang"); if (parseInt(t.val())>1) { t.val(parseInt(t.val())-1); } var n = parseInt($(this).siblings(".shuliang").val()); //得到商品的数量 var p = parseFloat($(this).parent().siblings().children(".gwc_dd_p").text()); //得到商品的单价 var tot = p * n; //计算单个商品的总价 TotalPrice(); }); // 点击商品按钮 $(".GoodsCheck").change(function() { $(this).parent().toggleClass('gwc_active') var goods = $(this).parents('.dfk_main').find(".GoodsCheck"); //获取本店铺的所有商品 var goodsC = $(this).parents('.dfk_main').find(".GoodsCheck:checked"); //获取本店铺所有被选中的商品 var Shops = $(".ShopCheck"); //获取本店铺的全选按钮 if (goods.length == goodsC.length) { //如果选中的商品等于所有商品 Shops.prop('checked', true).parent(".gwc_label").addClass("gwc_active"); //店铺全选按钮被选中 TotalPrice(); } else { //如果选中的商品不等于所有商品 Shops.prop('checked', false).parent(".gwc_label").removeClass("gwc_active"); //店铺全选按钮不被选中 // 计算 TotalPrice(); } }); // 点击店铺 $(".ShopCheck").change(function() { if ($(this).prop("checked") == true) { //如果全选按钮被选中 $(".gwc_label").addClass("gwc_active"); $(".GoodsCheck").prop('checked', true).parent(".gwc_1").addClass("gwc_active"); //所有按钮都被选中 // 计算 TotalPrice() } else { $(".gwc_label").removeClass("gwc_active"); $(".GoodsCheck").prop('checked', false).parent(".gwc_1").removeClass("gwc_active"); //else所有按钮不全选 // 计算 TotalPrice(); } }); //删除 $('.delete').click(function () { $(".dfk_main input[type='checkbox']:checked").each(function() { // 遍历选中的checkbox var goods = $(this).parents('.dfk_main').find(".GoodsCheck"); //获取本店铺的所有商品 var goodsC = $(this).parents('.dfk_main').find(".GoodsCheck:checked"); //获取本店铺所有被选中的商品 var Shops = $(".ShopCheck"); //获取本店铺的全选按钮 if (goods.length == goodsC.length) { //如果选中的商品等于所有商品 $('.dfk_main').html('<a href="#" >购物车为空<br>点击去购买</a>').addClass('flex-center kong'); Shops.prop('checked', false).parent(".gwc_label").removeClass("gwc_active"); //店铺全选按钮不被选中 $('.gwc_sl,.ShopTotal').text(0.00); TotalPrice(); } else { //如果选中的商品不等于所有商品 var n = $(this).parents('.gwc_dl').index(); // 获取checkbox所在行的顺序 $(".dfk_main").find(".gwc_dl:eq("+n+")").remove(); TotalPrice(); } }); }); function TotalPrice() { var oprice = 0; //店铺总价 var sl = 0;//数量 $(".dfk_main .gwc_dl .GoodsCheck").each(function () { //循环店铺里面的商品 if ($(this).is(":checked")) { //如果该商品被选中 var num = parseInt($(this).parents(".gwc_dl").find(".shuliang").val()); //得到商品的数量 // alert(num); var price = parseFloat($(this).parents(".gwc_dl").find(".gwc_dd_p").text()); //得到商品的单价 var total = price * num; //计算单个商品的总价 oprice += parseFloat(total); //计算该店铺的总价 sl += parseInt(num); } $('.gwc_sl').text(sl); $(".ShopTotal").text(oprice.toFixed(2)); //输出全部总价 }); } }); // document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px'; </script> </body> </html>