jQuery实现购物车完整功能,script+css完整代码+详细解释,可复制粘贴使用,更改图片及相关数据即可

这是一个使用 jQuery 实现的一个购物车功能的 JavaScript 脚本。

  1. 在文档加载完成后,通过 $() 函数获取页面元素并绑定事件处理函数。
  2. 当全选复选框 .checkAll 的状态改变时,将所有商品项的复选框状态设置为与全选复选框相同,并根据全选复选框的状态修改整个购物车的背景样式。
  3. 当商品项的复选框 .checkItem 状态改变时,根据选中的商品项数量修改全选复选框的状态,并修改对应商品项的背景样式。
  4. 点击增加按钮 .add 时,将该商品的购买数量加一,并根据新的购买数量计算并更新该商品的总金额,并调用 getSum() 函数计算整个购物车的总金额。
  5. 点击减少按钮 .substract 时,将该商品的购买数量减一(如果数量已经为1,则不执行操作),并根据新的购买数量计算并更新该商品的总金额,并调用 getSum() 函数计算整个购物车的总金额。
  6. 当手动输入购买数量时,将输入的值向上取整,并根据新的购买数量计算并更新该商品的总金额,并调用 getSum() 函数计算整个购物车的总金额。
  7. getSum() 函数用于计算购物车的总件数和总金额。它遍历所有商品项的购买数量,并将数量累加到 count 中,然后遍历所有商品项的总金额,并将金额累加到 money 中,最后更新页面上显示总件数和总金额的元素。
  8. 点击删除按钮 .del 时,移除该商品项,并调用 getSum() 函数计算整个购物车的总金额。
  9. 点击删除选中商品按钮 .del_choice 时,移除所有选中的商品项,并调用 getSum() 函数计算整个购物车的总金额。
  10. 点击清空购物车按钮 .delAll 时,移除所有商品项,并调用 getSum() 函数计算整个购物车的总金额。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../JSFile/jQuery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .bg{
            background-color: aqua;
        }

        body {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .commodity {
            width: 1400px;
            margin-top: 50px;
        }

        .commodity .head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: lightgray;
            height: 50px;
        }

        .commodity .head>div {
            display: flex;
        }

        .commodity .head .right {
            width: 700px;
            text-align: center;
        }

        .commodity .head .left>div,
        .commodity .head .right>div {
            flex: 1;
        }

        .commodity .head .left {
            width: 300px;
            margin-left: 10px;

        }

        .commodity img {
            width: 150px;
            display: block;
            padding: 10px;
            border: 1px solid lightgray;
            border-radius: 5px;

        }

        .commodity .main {
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            padding-top: 20px;
            /* background-color: aqua; */
            height: 250px;
            margin-top: 20px;
            border-top: 4px solid #666666;
        }

        .commodity .main .left {
            display: flex;
            align-items: start;
            width: 550px;
            justify-content: space-between;
        }

        .commodity .main .left>div {
            margin-left: 10px;
        }

        .commodity .main .left .product {
            display: flex;
            margin-left: 50px;
        }

        .commodity .main .product p {
            margin-left: 20px;
        }

        .commodity .main .right {
            display: flex;
            width: 700px;
        }

        .commodity .main .right>div {
            flex: 1;
            display: flex;
            justify-content: center;
        }

        .commodity .main .right .count {
            display: flex;
            height: 30px;
            font-size: 16px;
            margin-top: -5px;
        }

        .commodity .main .right button {
            width: 20px;
            border: none;
            border: 1px solid black;
            background-color: white;
            cursor: pointer;
            font-size: 16px;
        }

        .commodity .main .right input {
            width: 60px;
            text-align: center;
            outline: none;
            border: none;
            border-top: 1px solid black;
            border-bottom: 1px solid black;
        }
        .commodity .main .right .del,
        .commodity .foot .left .del_choice,
        .commodity .foot .left .delAll
        {
            cursor: pointer;
        }
        .commodity .foot {
            font-size: 14px;
            background-color: #b0abab;
            margin-top: 10px;
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .commodity .foot span {
            color: red;
        }

        .commodity .foot button {
            background-color: red;
            color: white;
            border: none;
            border: 1px solid red;
            height: 40px;
            width: 60px;
            font-weight: bold;
        }

        .commodity .foot>div {
            display: flex;
        }

        .commodity .foot .left {
            margin-left: 10px;
        }

        .commodity .foot .right {
            align-items: center;
        }

        .commodity .foot .right>div,
        .commodity .foot .left>div {
            margin-right: 20px;
        }

        .end {
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div class="commodity">
        <div class="head">
            <div class="left">
                <div>
                    <input type="checkbox" class="checkAll">全选
                </div>
                <div>商品</div>
            </div>
            <div class="right">
                <div>单价</div>
                <div>数量</div>
                <div>小计</div>
                <div>操作</div>
            </div>
        </div>
        <div class="main">
            <div class="left">
                <div>
                    <input type="checkbox" class="checkItem">
                </div>
                <div class="product">
                    <img src="../images/jd_2.webp" alt="">
                    <p>[5本268元]经典儿童文学彩图青少版八十天环游地球中学生语文数学大纲</p>
                </div>
            </div>
            <div class="right">
                <div class="price">¥12.60</div>
                <div class="count">
                    <button class="substract">-</button>
                    <input type="text" class="num" value="1"></input>
                    <button class="add">+</button>
                </div>
                <div class="sum">¥12.60</div>
                <div class="del">删除</div>
            </div>
        </div>
        <div class="main">
            <div class="left">
                <div>
                    <input type="checkbox" class="checkItem">
                </div>
                <div class="product">
                    <img src="../images/jd_3.webp" alt="">
                    <p>[5本268元]经典儿童文学彩图青少版八十天环游地球中学生语文数学大纲</p>
                </div>
            </div>
            <div class="right">
                <div class="price">¥25.60</div>
                <div class="count">
                    <button class="substract">-</button>
                    <input type="text" class="num" value="1"></input>
                    <button class="add">+</button>
                </div>
                <div class="sum">¥25.60</div>
                <div class="del">删除</div>
            </div>
        </div>
        <div class="main">
            <div class="left">
                <div>
                    <input type="checkbox" class="checkItem">
                </div>
                <div class="product">
                    <img src="../images/jd_4.webp" alt="">
                    <p>[5本268元]经典儿童文学彩图青少版八十天环游地球中学生语文数学大纲</p>
                </div>
            </div>
            <div class="right">
                <div class="price">¥18.60</div>
                <div class="count">
                    <button class="substract">-</button>
                    <input type="text" class="num" value="1"></input>
                    <button class="add">+</button>
                </div>
                <div class="sum">¥18.60</div>
                <div class="del">删除</div>
            </div>
        </div>
        <div class="foot">
            <div class="left">
                <div>
                    <input type="checkbox" class="checkAll">全选
                </div>
                <div class="del_choice">删除选中的商品</div>
                <div class="delAll">清空购物车</div>
            </div>
            <div class="right">
                <div>已经选<span class="sumNum">1</span>件商品</div>
                <div>总价:<span class="sumP">¥12.60</span></div>
                <button class="result">去结算</button>
            </div>
        </div>
        <div class="end"></div>
    </div>
    <script>
        $(function(){
            $('.checkAll').change(function(){
                var changeChecked=$(this).prop('checked')
                $('.checkItem,.checkAll').prop('checked',changeChecked)
                if($(this).prop('checked')){
                    $('.main').addClass('bg')
                }else{
                    $('.main').removeClass('bg')
                }
            })
            $('.checkItem').change(function(){
                if($(this).prop('checked')){
                    $(this).parents('.main').addClass('bg')
                }else{
                    $(this).parents('.main').removeClass('bg')
                }
                if($('.checkItem:checked').length==3){
                    $('.checkAll').prop('checked',true)
                }else{
                    $('.checkAll').prop('checked',false)
                }
            })
            // 增加购买数
            $('.add').click(function(){
                var n = $(this).siblings('.num').val()
                n++
                $(this).siblings('.num').val(n)
                var sum=$(this).parent().siblings('.sum')
                var pri=sum.siblings('.price').text()
                var p=pri.substr(1)
                var sumPri=(p*n).toFixed(2)
                sum.text('¥'+sumPri)
                getSum()
            })
            // 减少购买数
            $('.substract').click(function(){
                var n = $(this).siblings('.num').val()
                if(n==1){
                    return false
                }
                n--
                $(this).siblings('.num').val(n)
                var sum=$(this).parent().siblings('.sum')
                var pri=sum.siblings('.price').text()
                var p=pri.substr(1)
                var sumPri=(p*n).toFixed(2)/* toFixed(2)保留两位小数 */
                sum.text('¥'+sumPri)
                getSum()
            })
            // 手动输入购买数量
            $('.num').change(function(){
                // 输入值为非整数,向上取整
                var n=Math.ceil($(this).val())
                var sum=$(this).parent().siblings('.sum')
                var pri=sum.siblings('.price').text()
                var p=pri.substr(1)
                var sumPri=(p*n).toFixed(2)
                sum.text('¥'+sumPri)
                $(this).val(n)
            })
            getSum()
            function getSum(){
                var count=0   /* 计算总件数 */
                var money=0   /* 计算总价钱 */
                $('.num').each(function(i,ele){
                    count+=parseInt($(ele).val())
                })
                $('.sumNum').text(count)
                $('.sum').each(function(i,ele){
                    money+=parseFloat($(ele).text().substr(1))
                })
                $('.sumP').text('¥'+money.toFixed(2))
            }
            // 删除商品
            $('.del').click(function(){
                $(this).parents('.main').remove()
                getSum()
            })
            // 删除选中的商品
            $('.del_choice').click(function(){
                $('.checkItem:checked').parents('.main').remove()
                getSum()
            })
            // 清空购物车
            $('.delAll').click(function(){
                $('.main').remove()
                getSum()
            })
        })
    </script>
</body>

</html>