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

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

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