利用jQuery实现购物车功能，遇到了点问题，求大佬帮助

最新推荐文章于 2022-05-04 15:41:54 发布
最新推荐文章于 2022-05-04 15:41:54 发布
阅读量262 收藏
点赞数 1
文章标签： javascript css jquery css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57399180/article/details/116720133
版权

购物车中的其中一个功能，计算商品总计：只计算选中的所有商品的数量，初始总计为0，选中一个商品的时候为1，但是取消选中之后，总记的显示依然是1，求大佬解答。万分感谢！！！

所有代码如下：

cart.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>购物车</title>
    <link rel="shortcut icon" href="http://www.jd.com/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/cart.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <script src="../jquery.min.js"></script>
    <script src="./js/cart.js"></script>
</head>

<body>
    <div class="shortcut">
        <div class="w">
            <ul class="fl">
                <li class="home">
                    <i class="iconfont">&#xe613;</i>
                    <a href="#">京东首页</a>
                </li>
                <li class="mycity">
                    <div class="city">
                        <i class="iconfont">&#xe608;</i>
                        <span>河北</span>
                    </div>
                </li>
            </ul>
            <ul class="fr">
                <li class="user">
                    <div class="dt">
                        <a href="#">jd_173252vs</a>
                        <span>plus</span>
                        <i class="iconfont">&#xe602;</i>
                    </div>
                </li>
                <li class="spacer"></li>
                <li>
                    <div class="dt">
                        <a href="#">我的订单</a>
                    </div>
                </li>
                <li class="spacer"></li>
                <li class="myjd">
                    <div class="dt dt-more">
                        <a href="#">我的京东</a>
                        <i class="iconfont">&#xe602;</i>
                    </div>
                </li>
                <li class="spacer"></li>
                <li>
                    <div class="dt">
                        <a href="#">京东会员</a>
                    </div>
                </li>
                <li class="spacer"></li>
                <li>
                    <div class="dt dt-more">
                        <a href="#">企业采购</a>
                        <i class="iconfont">&#xe602;</i>
                    </div>
                </li>
                <li class="spacer"></li>
                <li>
                    <div class="dt dt-more">
                        <a href="#">客户服务</a>
                        <i class="iconfont">&#xe602;</i>
                    </div>
                </li>
                <li class="spacer"></li>
                <li>
                    <div class="dt dt-more">
                        <a href="#">网站导航</a>
                        <i class="iconfont">&#xe602;</i>
                    </div>
                </li>
                <li class="spacer"></li>
                <li>
                    <div class="dt">
                        <a href="#">手机京东</a>
                    </div>
                </li>

            </ul>
        </div>
    </div>
    <div class="header w">
        <div class="logo fl">
            <a href="#">
                <img src="http://misc.360buyimg.com/jdf/1.0.0/unit/global-header/5.0.0/i/jdlogo-201708-@1x.png" alt="">
            </a>

        </div>
        <div class="fr search">
            <div class="form">
                <input type="text">
                <button>搜索</button>
            </div>
        </div>
    </div>
    <div class="cart-body w">
        <div class="cart-filter-bar">
            <div class="fl">
                <em>全部商品</em>
                <span class="number">31</span>
            </div>
            <div class="cart-filter-top-popup">
                <em>降价&nbsp;&nbsp;</em>
                <span>购物车中有1件商品已降价，快去看看</span>
                <span class="close-popup">x</span>
            </div>
            <div class="fr cart-store">
                <span>配送至：</span>
                <div class="area-wrap">
                    <div class="area-wrap-text">
                        <div class="area-text">河北石家庄市长安区长丰街道</div>
                        <i class="iconfont">&#xe602;</i>
                    </div>
                </div>
            </div>
        </div>
        <div class="cart-thead">

            <div class="t-checkbox">
                <input type="checkbox" name="" class='checkall'>
                <span>全选</span>
            </div>

            <div class="t-goods">商品</div>

            <dic class="t-props">&nbsp;</dic>

            <div class="t-price">
                单价
            </div>

            <div class="t-quantity">重量</div>

            <div class="t-sum">小计</div>

            <div class="t-action">操作</div>

        </div>
        <div class="cart-tbody">
            <div class="shop">
                <div class="checkbox t-checkbox">
                    <input type='checkbox'>
                    <span class="shop-txt">
                        <a href="http://mall.jd.com/index-774766.html">醉枫阁酒类旗舰店</a>
                    </span>
                    <span class="shop-coupon"></span>
                </div>
            </div>
            <div class="item-list">
                <div class="item-header">
                    <div class="f-txt">
                        <span class="full-icon iconfont">&#xe634</span>
                        <span class="full-txt">满399元减309元，且中国内地包邮</span>
                        <a href="#">去凑单
                            <span>></span>
                        </a>
                    </div>
                    <div class="f-price t-price">¥0.00</div>
                </div>
                <div class="item-item">
                    <div class="item-form">
                        <div class="p-checkbox">
                            <div class="cart-checkbox">
                                <input type="checkbox" name="" id="">
                                <span class="line-circle"></span>
                            </div>
                        </div>
                        <div class="p-goods">
                            <div class="goods-form">
                                <div class="p-img">
                                    <a href="http://item.jd.com/10027353778389.html">
                                        <img src="http://img13.360buyimg.com/n0/s80x80_jfs/t1/160126/8/10178/58833/6041fef9Ea95ba59f/3d695cca3562e13d.jpg.dpg" alt=""></a>
                                </div>
                                <div class="p-msg">
                                    <a href="http://item.jd.com/10027353778389.html">苏格兰工艺可乐桶威士忌酒40度洋酒单支 1瓶装 700ml</a>
                                </div>
                            </div>
                        </div>
                        <div class="p-props">
                            <div class="props-txt">
                                <span>1瓶装</span>
                            </div>
                            <div class="props-txt">
                                <span>700ml</span>
                            </div>
                        </div>
                        <div class="p-price">
                            <span class="p-price-count">¥339.90</span>
                            <p class="sales">
                                <span class="sales-txt">
                                    <span>促销</span>
                                <i class="iconfont">&#xe602;</i>
                                </span>
                            </p>
                        </div>
                        <div class="p-quantity">
                            <div class="cart-num">
                                <button class="decrease">-</button>
                                <input type="text" class="cart-input" value='1'>
                                <button class="increase">+</button>
                            </div>
                            <p class="have">有货</p>
                        </div>
                        <div class="p-sum">
                            <strong>¥339.90</strong>
                        </div>
                        <div class="p-ops">
                            <a href="#" class="p-ops-item">删除</a>
                            <a href="#" class="p-ops-item">移除关注</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item-list">
                <div class="item-header">
                    <div class="f-txt">
                        <span class="full-icon iconfont">&#xe634</span>
                        <span class="full-txt">满399元减309元，且中国内地包邮</span>
                        <a href="#">去凑单
                            <span>></span>
                        </a>
                    </div>
                    <div class="f-price t-price">¥0.00</div>
                </div>
                <div class="item-item">
                    <div class="item-form">
                        <div class="p-checkbox">
                            <div class="cart-checkbox">
                                <input type="checkbox" name="" id="">
                                <span class="line-circle"></span>
                            </div>
                        </div>
                        <div class="p-goods">
                            <div class="goods-form">
                                <div class="p-img">
                                    <a href="http://item.jd.com/10027353778389.html">
                                        <img src="http://img13.360buyimg.com/n0/s80x80_jfs/t1/160126/8/10178/58833/6041fef9Ea95ba59f/3d695cca3562e13d.jpg.dpg" alt=""></a>
                                </div>
                                <div class="p-msg">
                                    <a href="http://item.jd.com/10027353778389.html">苏格兰工艺可乐桶威士忌酒40度洋酒单支 1瓶装 700ml</a>
                                </div>
                            </div>
                        </div>
                        <div class="p-props">
                            <div class="props-txt">
                                <span>1瓶装</span>
                            </div>
                            <div class="props-txt">
                                <span>700ml</span>
                            </div>
                        </div>
                        <div class="p-price">
                            <span class="p-price-count">¥339.90</span>
                            <p class="sales">
                                <span class="sales-txt">
                                    <span>促销</span>
                                <i class="iconfont">&#xe602;</i>
                                </span>
                            </p>
                        </div>
                        <div class="p-quantity">
                            <div class="cart-num">
                                <button class="decrease">-</button>
                                <input type="text" class="cart-input" value='1'>
                                <button class="increase">+</button>
                            </div>
                            <p class="have">有货</p>
                        </div>
                        <div class="p-sum">
                            <strong>¥339.90</strong>
                        </div>
                        <div class="p-ops">
                            <a href="#" class="p-ops-item">删除</a>
                            <a href="#" class="p-ops-item">移除关注</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cart-tbody">
            <div class="shop">
                <div class="checkbox t-checkbox">
                    <input type='checkbox'>
                    <span class="shop-txt">
                        <a href="http://mall.jd.com/index-10342283.html">沁馨园生鲜专营店</a>
                    </span>
                    <span class="shop-coupon"></span>
                </div>
            </div>
            <div class="item-list">
                <div class="item-header">
                    <div class="f-txt">
                        <span class="full-icon iconfont">&#xe634</span>
                        <span class="full-txt">满399元减309元，且中国内地包邮</span>
                        <a href="#">去凑单
                            <span>></span>
                        </a>
                    </div>
                    <div class="f-price t-price">¥0.00</div>
                </div>
                <div class="item-item">
                    <div class="item-form">
                        <div class="p-checkbox">
                            <div class="cart-checkbox">
                                <input type="checkbox" name="" id="">
                                <span class="line-circle"></span>
                            </div>
                        </div>
                        <div class="p-goods">
                            <div class="goods-form">
                                <div class="p-img">
                                    <a href="http://item.jd.com/10027353778389.html">
                                        <img src="http://img12.360buyimg.com/n0/s80x80_jfs/t1/163572/2/17537/240126/60711cd6E72faeb09/beff55d864ea07d4.jpg.dpg" alt=""></a>
                                </div>
                                <div class="p-msg">
                                    <a href="http://item.jd.com/10027353778389.html">顺丰/京东 国产车厘子美早大樱桃 时令生鲜水果 孕妇水果大樱桃 当</a>
                                </div>
                            </div>
                        </div>
                        <div class="p-props">
                            <div class="props-txt">
                                <span>车厘子大樱桃2斤 J</span>
                            </div>

                        </div>
                        <div class="p-price">
                            <span class="p-price-count">¥38.00</span>
                            <p class="sales">
                                <span class="sales-txt">
                                    <span>促销</span>
                                <i class="iconfont">&#xe602;</i>
                                </span>
                            </p>
                        </div>
                        <div class="p-quantity">
                            <div class="cart-num">
                                <button class="decrease">-</button>
                                <input type="text" class="cart-input" value='1'>
                                <button class="increase">+</button>
                            </div>
                            <p class="have">有货</p>
                        </div>
                        <div class="p-sum">
                            <strong>¥38.00</strong>
                        </div>
                        <div class="p-ops">
                            <a href="#" class="p-ops-item">删除</a>
                            <a href="#" class="p-ops-item">移除关注</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cart-tbody">
            <div class="shop">
                <div class="checkbox t-checkbox">
                    <input type='checkbox'>
                    <span class="shop-txt">
                        <a href="https://mall.jd.com/index-18611.html">华味亨旗舰店</a>
                    </span>
                    <span class="shop-coupon"></span>
                </div>
            </div>
            <div class="item-list">
                <div class="item-header">
                    <div class="f-txt">
                        <span class="full-icon iconfont">&#xe634</span>
                        <span class="full-txt">每满99元减22元</span>
                        <a href="#">去凑单
                            <span>></span>
                        </a>
                    </div>
                    <div class="f-price t-price">¥0.00</div>
                </div>
                <div class="item-item">
                    <div class="item-form">
                        <div class="p-checkbox">
                            <div class="cart-checkbox">
                                <input type="checkbox" name="" id="">
                                <span class="line-circle"></span>
                            </div>
                        </div>
                        <div class="p-goods">
                            <div class="goods-form">
                                <div class="p-img">
                                    <a href="http://item.jd.com/20974797887.html">
                                        <img src="http://img11.360buyimg.com/n0/s80x80_jfs/t1/169732/15/15632/272069/60651bdfEacafd0c4/818d23ae49944073.jpg.dpg" alt=""></a>
                                </div>
                                <div class="p-msg">
                                    <a href="http://item.jd.com/20974797887.html">【300-210】华味亨 每日坚果混合坚果果仁金款500g/罐 腰果巴旦木核桃仁红提果干休闲零食</a>
                                </div>
                            </div>
                        </div>
                        <div class="p-props">
                            <div class="props-txt">
                                <span></span>
                            </div>
                            <div class="props-txt">
                                <span></span>
                            </div>
                        </div>
                        <div class="p-price">
                            <span class="p-price-count">¥300.00</span>
                            <p class="sales">
                                <span class="sales-txt">
                                    <span>促销</span>
                                <i class="iconfont">&#xe602;</i>
                                </span>
                            </p>
                        </div>
                        <div class="p-quantity">
                            <div class="cart-num">
                                <button class="decrease">-</button>
                                <input type="text" class="cart-input" value='1'>
                                <button class="increase">+</button>
                            </div>
                            <p class="have">有货</p>
                        </div>
                        <div class="p-sum">
                            <strong>¥300.00</strong>
                        </div>
                        <div class="p-ops">
                            <a href="#" class="p-ops-item">删除</a>
                            <a href="#" class="p-ops-item">移除关注</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cart-tbody">
            <div class="shop">
                <div class="checkbox">
                    <input type='checkbox'>
                    <span class="shop-txt">
                        <a href="http://item.jd.com/4588092.html">京东海外香水彩妆自营专区</a>
                    </span>
                    <span class="shop-coupon"></span>
                </div>
            </div>
            <div class="item-list">
                <div class="item-header">
                    <div class="f-txt">
                        <span class="full-icon iconfont">&#xe634</span>
                        <span class="full-txt">满399元减309元，且中国内地包邮</span>
                        <a href="#">去凑单
                            <span>></span>
                        </a>
                    </div>
                    <div class="f-price t-price">¥0.00</div>
                </div>
                <div class="item-item">
                    <div class="item-form">
                        <div class="p-checkbox">
                            <div class="cart-checkbox">
                                <input type="checkbox" name="" id="">
                                <span class="line-circle"></span>
                            </div>
                        </div>
                        <div class="p-goods">
                            <div class="goods-form">
                                <div class="p-img">
                                    <a href="http://item.jd.com/10027353778389.html">
                                        <img src="http://img20.360buyimg.com/n0/s80x80_jfs/t1/85639/38/17052/181452/5e84595aEe4b1a8c9/18051ac2645743b9.jpg.dpg" alt=""></a>
                                </div>
                                <div class="p-msg">
                                    <a href="http://item.jd.com/10027353778389.html">露华浓（Revlon）美国进口 150#自然白粉底液 保湿遮瑕bb霜遮瑕膏 混合油性 30ml</a>
                                </div>
                            </div>
                        </div>
                        <div class="p-props">
                            <div class="props-txt">
                                <span>150</span>
                            </div>
                            <div class="props-txt">
                                <span>30ml</span>
                            </div>
                        </div>
                        <div class="p-price">
                            <span class="p-price-count">¥119.90</span>
                            <p class="sales">
                                <span class="sales-txt">
                                    <span>促销</span>
                                <i class="iconfont">&#xe602;</i>
                                </span>
                            </p>
                        </div>
                        <div class="p-quantity">
                            <div class="cart-num">
                                <button class="decrease">-</button>
                                <input type="text" class="cart-input" value='1'>
                                <button class="increase">+</button>
                            </div>
                            <p class="have">有货</p>
                        </div>
                        <div class="p-sum">
                            <strong>¥1199.90</strong>
                        </div>
                        <div class="p-ops">
                            <a href="#" class="p-ops-item">删除</a>
                            <a href="#" class="p-ops-item">移除关注</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cart-tbody">
            <div class="shop">
                <div class="checkbox">
                    <input type='checkbox'>
                    <span class="shop-txt">
                        <a href="http://item.jd.com/4588092.html">京东海外香水彩妆自营专区</a>
                    </span>
                    <span class="shop-coupon"></span>
                </div>
            </div>
            <div class="item-list">
                <div class="item-header">
                    <div class="f-txt">
                        <span class="full-icon iconfont">&#xe634</span>
                        <span class="full-txt">满399元减309元，且中国内地包邮</span>
                        <a href="#">去凑单
                            <span>></span>
                        </a>
                    </div>
                    <div class="f-price t-price">¥0.00</div>
                </div>
                <div class="item-item">
                    <div class="item-form">
                        <div class="p-checkbox">
                            <div class="cart-checkbox">
                                <input type="checkbox" name="" id="">
                                <span class="line-circle"></span>
                            </div>
                        </div>
                        <div class="p-goods">
                            <div class="goods-form">
                                <div class="p-img">
                                    <a href="http://item.jd.com/10027353778389.html">
                                        <img src="http://img20.360buyimg.com/n0/s80x80_jfs/t1/85639/38/17052/181452/5e84595aEe4b1a8c9/18051ac2645743b9.jpg.dpg" alt=""></a>
                                </div>
                                <div class="p-msg">
                                    <a href="http://item.jd.com/10027353778389.html">露华浓（Revlon）美国进口 150#自然白粉底液 保湿遮瑕bb霜遮瑕膏 混合油性 30ml</a>
                                </div>
                            </div>
                        </div>
                        <div class="p-props">
                            <div class="props-txt">
                                <span>150</span>
                            </div>
                            <div class="props-txt">
                                <span>30ml</span>
                            </div>
                        </div>
                        <div class="p-price">
                            <span class="p-price-count">¥119.90</span>
                            <p class="sales">
                                <span class="sales-txt">
                                    <span>促销</span>
                                <i class="iconfont">&#xe602;</i>
                                </span>
                            </p>
                        </div>
                        <div class="p-quantity">
                            <div class="cart-num">
                                <button class="decrease">-</button>
                                <input type="text" class="cart-input" value='1'>
                                <button class="increase">+</button>
                            </div>
                            <p class="have">有货</p>
                        </div>
                        <div class="p-sum">
                            <strong>¥1199.90</strong>
                        </div>
                        <div class="p-ops">
                            <a href="#" class="p-ops-item">删除</a>
                            <a href="#" class="p-ops-item">移除关注</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cart-tbody">
            <div class="shop">
                <div class="checkbox">
                    <input type='checkbox'>
                    <span class="shop-txt">
                        <a href="http://item.jd.com/4588092.html">京东海外香水彩妆自营专区</a>
                    </span>
                    <span class="shop-coupon"></span>
                </div>
            </div>
            <div class="item-list">
                <div class="item-header">
                    <div class="f-txt">
                        <span class="full-icon iconfont">&#xe634</span>
                        <span class="full-txt">满399元减309元，且中国内地包邮</span>
                        <a href="#">去凑单
                            <span>></span>
                        </a>
                    </div>
                    <div class="f-price t-price">¥0.00</div>
                </div>
                <div class="item-item">
                    <div class="item-form">
                        <div class="p-checkbox">
                            <div class="cart-checkbox">
                                <input type="checkbox" name="" id="">
                                <span class="line-circle"></span>
                            </div>
                        </div>
                        <div class="p-goods">
                            <div class="goods-form">
                                <div class="p-img">
                                    <a href="http://item.jd.com/10027353778389.html">
                                        <img src="http://img20.360buyimg.com/n0/s80x80_jfs/t1/85639/38/17052/181452/5e84595aEe4b1a8c9/18051ac2645743b9.jpg.dpg" alt=""></a>
                                </div>
                                <div class="p-msg">
                                    <a href="http://item.jd.com/10027353778389.html">露华浓（Revlon）美国进口 150#自然白粉底液 保湿遮瑕bb霜遮瑕膏 混合油性 30ml</a>
                                </div>
                            </div>
                        </div>
                        <div class="p-props">
                            <div class="props-txt">
                                <span>150</span>
                            </div>
                            <div class="props-txt">
                                <span>30ml</span>
                            </div>
                        </div>
                        <div class="p-price">
                            <span class="p-price-count">¥119.90</span>
                            <p class="sales">
                                <span class="sales-txt">
                                    <span>促销</span>
                                <i class="iconfont">&#xe602;</i>
                                </span>
                            </p>
                        </div>
                        <div class="p-quantity">
                            <div class="cart-num">
                                <button class="decrease">-</button>
                                <input type="text" class="cart-input" value='1'>
                                <button class="increase">+</button>
                            </div>
                            <p class="have">有货</p>
                        </div>
                        <div class="p-sum">
                            <strong>¥119.90</strong>
                        </div>
                        <div class="p-ops">
                            <a href="#" class="p-ops-item">删除</a>
                            <a href="#" class="p-ops-item">移除关注</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cart-smart">
        </div>
    </div>
    <div class="options-box">
        <div class="w">
            <div class="fl">
                <div class="select-all">
                    <div class="t-checkbox">
                        <input type="checkbox" name="" class='checkall'>
                        <span>全选</span>
                    </div>
                </div>
                <div class="operation">
                    <a href="#" class="opt-batch-remove">删除选中的商品</a>
                    <a href="#" class="opt-batch-follow">移入关注</a>
                    <a href="#" class="clear-cart">清理购物车</a>
                </div>
            </div>
            <div class="fr">
                <div class="btn-area"><a href="#">去结算</a></div>
                <div class="price-sum">
                    <div class="price-show">

                        <span class="amount-sum">
                            已选择
                            <em>0</em>
                            件商品
                            <i class="iconfont">&#xe602;</i>
                        </span>
                        <span class="txt">总价:</span>
                        <span class="priceShow">
                            <em>￥0.00</em>
                           <a href="#"><i class="iconfont">&#xe614;</i></a> 
                        </span>
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>

</html>

cart.css

    * {
        margin: 0;
        padding: 0;
    }
    
    body {
        height: 2000px;
    }
    
    li {
        list-style: none;
    }
    
    a {
        text-decoration: none;
    }
    
    a:hover {
        color: #c91623;
    }
    
    .w {
        width: 990px;
        margin: 0 auto;
    }
    
    .fl {
        float: left;
    }
    
    .fr {
        float: right;
    }
    
    .shortcut {
        width: 100%;
        height: 30px;
        line-height: 30px;
        background-color: #e3e4e5;
        border-bottom: 1px solid #ddd;
    }
    
    .shortcut a,
    span {
        color: #999;
        font-size: 12px;
    }
    
    .shortcut li {
        float: left;
    }
    
    .home i,
    .mycity i {
        color: #5c5452;
    }
    
    .mycity {
        margin-left: 15px;
    }
    
    .shortcut .spacer {
        height: 12px;
        border-left: 1px solid #999;
        margin: 10px 10px;
    }
    
    .dt {
        position: relative;
    }
    
    .user .dt {
        position: relative;
        padding-right: 70px;
    }
    
    .user .dt a {
        font-size: 16px;
    }
    
    .user .dt span {
        position: absolute;
        top: 7px;
        right: 30px;
        display: inline-block;
        width: 38px;
        height: 16px;
        line-height: 14px;
        border-radius: 3px;
        text-align: center;
        background-color: #d7d4cb;
        font-size: 16px;
        font-weight: 600;
    }
    
    .dt i {
        position: absolute;
        top: 2px;
        right: 0px;
        font-size: 12px;
        color: #999;
    }
    
    .dt-more {
        width: 60px;
    }
    
    .header {
        height: 100px;
    }
    
    .dt-more i {
        right: -5px;
    }
    
    .logo {
        width: 100%;
        height: 50px;
    }
    
    .logo img {
        width: 134px;
        height: 42px;
        margin: 20px 16px;
    }
    
    .form {
        padding: 0;
        margin-top: -14px;
        border: 1px solid #c91623;
        box-sizing: border-box;
    }
    
    .form input {
        width: 260px;
        height: 18px;
        outline: none;
        border: 0;
        padding: 3px 5px;
        line-height: 18px;
    }
    
    .form button {
        width: 48px;
        height: 26px;
        background-color: #c91623;
        border: 0;
        color: #fff;
        font-weight: 700;
        border-radius: 0;
    }
    
    .cart-filter-bar {
        position: relative;
        height: 40px;
        width: 100%;
    }
    
    .cart-filter-bar .fl em,
    .cart-filter-bar .fl span {
        color: #e2231a;
        font-weight: 600;
        font-size: 16px;
        font-style: normal;
    }
    
    .cart-filter-top-popup {
        position: absolute;
        top: 0px;
        left: 33.3%;
        margin: auto;
        line-height: 23px;
        padding: 1px 15px;
        box-shadow: 1px 1px 8px 0 #ddd;
    }
    
    .cart-filter-top-popup em {
        color: #e2231a;
        font-style: normal;
        font-size: 12px;
    }
    
    .cart-filter-top-popup span {
        color: #434343;
    }
    
    .cart-filter-top-popup .close-popup {
        font-size: 14px;
        padding-left: 20px;
        color: rgb(182, 173, 173);
        cursor: pointer;
    }
    
    .cart-store {
        position: relative;
        width: 240px;
        height: 26px;
    }
    
    .cart-store span {
        line-height: 26px;
        color: #434343;
        font-size: 12px;
    }
    
    .area-wrap {
        top: 0;
        height: 26px;
    }
    
    .area-wrap-text {
        position: absolute;
        top: 0;
        right: 3px;
        height: 23px;
        width: 187px;
        background-color: #fff;
        border: 1px solid #CECBCE;
    }
    
    .area-text {
        width: 187px;
        height: 23px;
        font-size: 12px;
        color: #434343;
        line-height: 23px;
        padding-left: 4px;
    }
    
    .area-wrap-text i {
        position: absolute;
        top: 3px;
        right: 3px;
        color: #ccc;
    }
    
    .cart-thead {
        height: 32px;
        line-height: 32px;
        padding: 5px 0;
        background-color: #f3f3f3;
        border: 1px solid #e9e9e9;
        font-size: 12px;
        color: #434343;
    }
    
    .t-checkbox {
        float: left;
        height: 18px;
        line-height: 32px;
        width: 122px;
        padding-left: 11px;
    }
    
    .t-checkbox span {
        font-size: 12px;
        color: #434343;
        vertical-align: top;
    }
    
    .t-goods {
        float: left;
        width: 208px;
    }
    
    .t-props {
        float: left;
        padding: 0 150px 0 20px;
    }
    
    .t-price {
        float: left;
        width: 120px;
        text-align: right;
        padding-right: 50px;
    }
    
    .t-quantity {
        float: left;
        width: 80px;
        text-align: center;
    }
    
    .t-sum {
        float: left;
        width: 100px;
        text-align: right;
        padding-right: 40px;
    }
    
    .t-action {
        float: left;
        width: 75px;
    }
    
    .cart-tbody {
        margin: 10px 0;
    }
    
    .shop {
        height: 30px;
        border-bottom: 2px solid #aaa;
    }
    
    .shop .checkbox {
        min-width: 130px;
        float: left;
        height: 18px;
        line-height: 32px;
        padding-left: 11px;
    }
    
    .shop .checkbox a {
        font-size: 12px;
        font-weight: 700;
        color: #666;
        vertical-align: top;
        margin-left: 10px;
    }
    
    .item-list {
        border: 1px solid #aaa;
        margin-top: 5px;
        overflow: hidden;
    }
    
    .item-header {
        height: 33px;
    }
    
    .f-txt {
        float: left;
        width: 750px;
        margin-left: 10px;
        margin-top: 10px;
    }
    
    .full-icon {
        color: #c91623;
        font-size: 18px!important;
    }
    
    .full-txt,
    .f-txt a {
        font-size: 12px;
        margin-left: 15px;
        color: #666;
        vertical-align: baseline;
    }
    
    .f-txt a {
        color: #333;
        margin-left: 5px;
    }
    
    .f-txt a span {
        color: #333;
    }
    
    .f-price {
        margin-top: 10px;
        font-size: 12px;
        color: #333;
    }
    
    .item-form {
        border-top: 1px solid #f0f0f0;
        position: relative;
        height: 108px;
        width: 948px;
        margin-left: 40px;
        margin-top: 10px;
    }
    
    .p-checkbox {
        float: left;
        width: 30px;
    }
    
    .cart-checkbox {
        position: relative;
        margin-left: 10px;
        width: 30px;
        height: 40px;
    }
    
    .cart-checkbox input {
        position: relative;
        top: 13px;
        left: -40px;
    }
    
    .line-circle {
        position: absolute;
        top: -10px;
        left: -35px;
        height: 25px;
        border-left: 2px dotted #333;
    }
    
    .p-goods {
        width: 300px;
        height: 80px;
        float: left;
    }
    
    .goods-form {
        position: absolute;
        float: left;
        top: 10px;
        left: 0px;
        width: 300px;
    }
    
    .p-goods .p-img {
        width: 80px;
        height: 80px;
        border: 1px solid #eee;
    }
    
    .p-goods .p-msg {
        position: absolute;
        top: 5px;
        left: 90px;
        overflow: hidden;
    }
    
    .p-goods .p-msg a {
        display: inline-block;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        color: #333;
    }
    
    .p-props {
        float: left;
        width: 130px;
        min-height: 10px;
        overflow: hidden;
        padding: 15px 0 0 20px;
    }
    
    .p-props span {
        color: #333;
    }
    
    .p-price {
        float: left;
        width: 130px;
        text-align: right;
        padding-right: 40px;
        margin-top: 15px;
    }
    
    .p-price-count {
        color: #333;
    }
    
    .sales {
        margin-top: 5px;
    }
    
    .sales-txt {
        border: 1px solid #e2231a;
        padding: 1px 2px;
    }
    
    .sales-txt span {
        color: #e2231a;
    }
    
    .sales-txt i {
        font-size: 12px;
        color: #e2231a;
    }
    
    .p-quantity {
        float: left;
        width: 84px;
        margin-top: 20px;
    }
    
    .cart-num {
        width: 84px;
    }
    
    .cart-num .decrease,
    .cart-num .increase {
        width: 17px;
        height: 20px;
        border: 1px solid #cbcbcb;
        background-color: #f1f1f1;
    }
    
    .cart-num .decrease {
        float: left;
    }
    
    .cart-num .increase {
        float: right;
    }
    
    .cart-num .cart-input {
        float: left;
        width: 46px;
        outline: none;
        border: 1px solid #ccc;
        margin-top: 1px;
        text-align: center;
        line-height: 17px;
    }
    
    .have {
        color: #ccc;
        font-size: 14px;
        text-align: center;
    }
    
    .p-sum {
        float: left;
        width: 100px;
        text-align: center;
        padding-left: 30px;
        margin-top: 21px;
        font-size: 12px;
    }
    
    .p-ops {
        float: left;
        margin-top: 20px;
    }
    
    .p-ops-item {
        display: block;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        color: #666;
    }
    
    .options-box {
        position: fixed;
        bottom: 0;
        box-shadow: 0px 0 2px 0 #ccc;
        margin: 0 auto;
        width: 100%;
        background: #fff;
    }
    
    .select-all {
        float: left;
        width: 70px;
        height: 52px;
        line-height: 52px;
    }
    
    .select-all .t-checkbox {
        margin-top: 11px;
    }
    
    .operation {
        float: left;
        height: 52px;
        line-height: 52px;
    }
    
    .operation a {
        display: inline-block;
        font-size: 12px;
        color: #666;
        margin-left: 10px;
    }
    
    .operation .clear-cart {
        color: #333;
        font-weight: 600;
    }
    
    .btn-area {
        float: right;
        height: 50px;
    }
    
    .btn-area a {
        display: block;
        height: 54px;
        width: 94px;
        background-color: #e54346;
        font-size: 18px;
        text-align: center;
        line-height: 52px;
        color: #fff;
        margin: 0;
        margin-top: -1px;
        margin-right: -1px;
    }
    
    .price-sum {
        float: right;
        padding-right: 10px;
        line-height: 30px;
    }
    
    .amount-sum {
        padding-right: 15px;
    }
    
    .amount-sum em {
        color: #e2231a;
        font-style: normal;
        font-weight: 600;
    }
    
    .amount-sum i {
        font-size: 12px;
    }
    
    .priceShow {
        margin-top: 5px;
    }
    
    .priceShow em {
        font-size: 14px;
        color: #e2231a;
        font-weight: 700;
        font-style: normal;
        margin-left: 0;
    }
    
    .priceShow a i {
        color: rgb(179, 110, 32);
        font-size: 18px;
    }

cart.js

$(function() {
    // cart-filter-top-popup 点击隐藏
    $(".close-popup").change(function() {
            $(".cart-filter-top-popup").css("display", "none");
        })
        //options-box  固定定位
    $(window).scroll(function() {
            console.log($(".options-box").offset().top - $(document).scrollTop());
            if (($(".cart-body").offset().top + $(".cart-body").height() - $(document).scrollTop()) < $(window).height()) {
                $(".options-box").css({
                    position: "relative",
                    boxShadow: "0 0 0 0",
                })
                $(".options-box .w").css({
                    border: " 1px solid #ccc",
                    height: "52px"
                })

            } else {
                $(".options-box").css({
                    position: "fixed",
                    bottom: 0,
                    boxShadow: "0px 0 2px 0  #ccc",
                    margin: "0 auto",
                    width: "100%",
                    background: "#fff"
                })
                $(".options-box .w").css("border", 0)
            }
        })
        // 计算购物车商品数量
    getSum();
    // 全部商品显示
    // 购物车全选实现
    $(".checkall").change(function() {
        $(".shop input , .p-checkbox input,.checkall").prop("checked", $(this).prop("checked"));
        // 改变总计商品的数量
        getCheckedSum();
    })
    $(".shop input").change(function() {
        console.log($(this).parent().parent());
        $(this).parent().parent().siblings(".item-list").children(".item-item").children().children().children().children("input").prop("checked", $(this).prop("checked"));
        // 通过店铺复选框实现全选
        if ($(".shop input:checked").length === $(".shop input").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
        // 改变总计商品的数量
        getCheckedSum();
    })

    // 通过商品的复选框控制全选
    $(".p-checkbox input").change(function() {
        // 改变商店复选框的状态
        if ($(this).prop("checked")) {
            if ($(this).parent().parent().parent().parent().parent().siblings(".item-list").children(".item-item").children().children().children().children("input").prop("checked")) {
                $(this).parent().parent().parent().parent().parent().siblings(".shop").children().children("input").prop("checked", true);
            }
        } else {
            $(this).parent().parent().parent().parent().parent().siblings(".shop").children().children("input").prop("checked", false);
        }
        // 改变全选框的状态
        if ($(".p-checkbox input:checked").length === $(".p-checkbox input").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);

        }

        // 改变总计商品的数量
        getCheckedSum()
    })


    // 增加商品数量
    function increase() {
        $(".increase").click(function() {
            getCheckedSum()
                // 计算购物车商品数量
            getSum();
            var num = $(this).siblings(".cart-input").val();
            var price = $(this).parent().parent().siblings(".p-price").children('span').html().substr(1);
            num++;
            price = (price * num).toFixed(2);
            console.log(price);
            $(this).siblings(".cart-input").val(num);
            $(this).parent().parent().siblings(".p-sum").children().html("¥" + price);

        })
    }
    increase();
    // 减少商品的数量
    function decrease() {
        $(".decrease").click(function() {
            var num = $(this).siblings(".cart-input").val();
            var price = $(this).parent().parent().siblings(".p-price").children('span').html().substr(1);

            console.log(price);
            num--;
            price = (price * num).toFixed(2);
            if (num > 0) {
                $(this).siblings(".cart-input").val(num);
                $(this).parent().parent().siblings(".p-sum").children().html("¥" + price);
            } else {
                return
            }
            getCheckedSum()
                // 计算购物车商品数量
            getSum();
        })
    }
    decrease();

    // 计算总计
    function getCheckedSum() {
        var count = 0;
        var money = 0;
        $(".p-checkbox input:checked").each(function(i, ele) {
            count += parseInt($(ele).parent().parent().siblings(".p-quantity").children().children("input").val());
            money += parseInt($(ele).parent().parent().siblings(".p-sum").children().html().substr(1))
            $(".amount-sum em").text(count);
            $(".priceShow em").text(money);
        })


    }
    // 计算购物车商品数量
    function getSum() {
        var count = 0;
        $(".p-checkbox input").each(function(i, ele) {
            count += parseInt($(ele).parent().parent().siblings(".p-quantity").children().children("input").val());
            $(".number").text(count);
        })
    }

})

求回答。

wyy爱学习
关注
开发购物车模块中遇到的问题
Iswear_1992的C笔记
10-19 7234
无法添加商品 需求：点击商品详细页面中的“我要购买”按钮，servlet获得请求，根据session中的uid和hidden的book id来搜索数据库，若找到记录，那么在原有的记录上添加商品数量；否则新增条目。 问题：商品没有添加，数量也没有增加 原因：问题出在Dao中的toCartItem(Map map)方法，我没有判断map是否为空就直接使用mapToBean方法来封装数据；没有考虑到如果查
使用JS+JQuery实现一个简单的购物车功能
编程小陈
01-09 2673
实现简易购物车的新增、删除、加减数量以及根据数量动态显示金额和总价的功能。 前言:最近刚学JQuery,今天项目经理给了一个练手的题,要求是实现点击表格中的"加入购物车"之后,能 够在下方的表格动态添加商品信息,并且动态修改商品的数量、金额和总价。 目前实现了点击加入购物车能添加到下面的表格中，但是无法增加数量和修改单价，希望大佬们能给点思路。后续如果做出来了我会更新此博客。 首先是html页面，如图： 但是目前只能做到加入购物车，无法增加数量和金额，如图： 代码如下：...
Jquery实现购物车页面
qq_44116526的博客
11-06 849
Jquery实现购物车页面 使用时要引入Jquery.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scal
jquery购物车插件minicart.js
当富网络
03-12 2149
jquery购物车插件minicart.js 简单丰富，开发操作简单，用户使用实用性强 下面是中英文版介绍： http://www.jq22.com/jquery-info496 http://www.html580.com/11629/demo 查看演示website立即下载 插件描述：minicart是提高你的宝贝购物车集成的很好的方法之一。你的网站一旦拥有了它...
购物车问题合集
weixin_40631386的博客
11-16 417
1.jdbc连接写错了，我恨死自己了 Connection conn= DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/cart?characterEncoding=UTF-8","root","admin"); 2. 解决方案： 思路： 因为订单项实体类中定义了id，但是在删除订单项的时候，获取的商品的id，再添加的时候，重复商品，只需要修改数量即可，但是加上一个id的话，业务就比较复杂了，所以根据商品的id来删除一个一个的订单项，就这
jQuery实现购物车
qq_52108058的博客
05-04 7977
文章目录前言一、购物车属性全选1.案例演示2.实现代码3.实现方法二、使用步骤1.引入库2.读入数据总结 前言 自己对index.html进行清楚的理解，清楚div包括的范围，class类名的写法，从而可以更容易写出js内容。 一、购物车属性全选 1.案例演示 当用户点击全选按钮的时候，把所有的商品复选框选中。 2.实现代码 $('.checkall').change(function(){ $('.j-checkbox, .checkall').prop("checked",$(this).
用jQuery做一个简单的购物车
StartChong
11-02 3942
用jQuery做一个简单的购物车 前言： 之前用的JavaScript做的，现在结合jQuery再试一下。效果虽然差不多，但是对于了解和学习jQuery选择器还有事件等可以有一个更好的了解。 (img)自行准备 实现功能： 将商品添加到购物车（如果购物车有相同物品则累加对应数量） 小计计算与总和 积分计算与总和 实现数量的增加和减少（并同步小计和积分及其总和） 单个商品删除 批量删除 实现效果...
li通过绑定点击事件实现类似购物车功能(全选，点击勾选、取消等)，此例为模仿移动端小说书架界面实现勾选取消功能展示，有些麻烦但好理解（前端xb要努力变强）
weixin_55437576的博客
03-12 961
效果展示
java学习：基于servlet和jsp写的一个购物车小案例（大佬勿喷）
h13245的博客
03-14 916
result 所有的书籍 购物车界面 项目前的准备 首先要导入maven 的jar包依赖 <!--servlet--> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servle...
购物车JS
悸动的博客
11-24 1121
购物车JS的操作(jquery) 先说思路:先写计算方法,然后在’勾选’,'数量增加’时调用计算方法 然后展示代码 html代码 &amp;amp;amp;lt;li class=&amp;amp;quot;col01&amp;amp;quot;&amp;amp;amp;gt;&amp;amp;amp;lt;input type=&amp;amp;quot;checkbox&amp;amp;quot; name=&am
jQuery移动端购物车结算页面代码
01-08
jQuery移动端购物车结算页面代码,jQuery制作我的购物车商品添加删除结算手机页面模板代码。
jQuery+Bootstrap布局购物车结算页面代码.zip
最新发布
09-22
有兴趣刚需的可以自己下载，非常实用的jquery代码，可以完美运行，有能力的还可以二次修改！
jquery购物车代码（3种）
02-29
3种jquery实现的购物车页面。包括商品拖动到购物车，.net实现的xml格式！
利用JQuery模仿淘宝购物车源码
02-24
此源码为本人亲自开发的，经过调试确实可行才发，希望对你有帮助，此源码是模仿淘宝购物车的功能，带checkbox的利用jQuery实现购物车的价格计算的，有不足之处，请多多指教
jQuery淘宝购物车页面商品结算
05-18
完美模仿淘宝购物车界面， jQuery淘宝购物车页面商品结算
JS实现购物车
qq_40513088的博客
12-24 752
JS实现购物车 1.实现思路： （1）在body中定义一个id="list",将所有商品存放在一个列表中，当进入购物车时如果有两个商品被勾选了，需要计算出总共的价钱和商品的件数以及最贵的商品价格； （2）在JS中获取元素属性，分别把它们存放在数组中； （3）点击加号进行商品添加，点击减号进行商品移除； （4）将上一步用两个点击函数来实现添加和移除； （5）在JS中用for循环来计算总价...
jquery购物车代码简单理解
weixin_43730646的博客
02-13 672
全选 商品 单价 数...
备忘：重构购物车遇到的问题
fsx_xiaomei的博客
09-11 437
最近在重构APP的购物车功能，要实现的效果如下： 看上去挺简单的吧，之前用的布局是： ScrollView+动态创建ListView（购物车有多少个供应商就add多少个ListView） 我重构购物车的目的： 1.布局修改，外层布局使用RecyclerView 2.全选能悬浮在购物车的底部，需要时展示 就这样两个改动，遇到了挺多问题，遇到问题就解决呗，以下是我记录的问题和重构时的想法...
jquery购物车案例
weixin_43849543的博客
05-03 3824
实现功能： 购物车的商品全选、增减商品数量、修改商品小计、计算商品总额、删除商品、选中商品添加背景 1.购物车的商品全选、计算商品总额 2.全不选 3.增减商品数量、修改商品小计、选中商品添加背景 4.删除商品 删除后： 5.删除所选商品 删除后： 6.清空购物车 清空后： 代码部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta n
使用jQuery实现购物车结算功能的步骤解析
"该资源主要介绍了如何使用jQuery来实现一个购物车的结算功能，通过查看提供的HTML和CSS代码，我们可以看到这是一个简单的购物车界面，包括商品选择和总价计算的实现。" 在电子商务网站中，购物车是用户交互的核心...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值