jquery实现购物车功能

小鱼儿 2022-09-14 09:10 220阅读 0赞

**css:**

**html:**

<button>全选</button>
        <button>反选</button>
        <ul>
            <li>
                <input type="checkbox"> iphone12promax 单价: <em>19.99</em> 
                <button class="cut">-</button><input type="text" value="0" disabled><button class="add">+</button>
                小计: <span>0</span> 元
            </li>
            <li>
                <input type="checkbox"> iphone12promax 单价: <em>9.99</em> 
                <button class="cut">-</button><input type="text" value="0" disabled><button class="add">+</button>
                小计: <span>0</span> 元
            </li>
            <li>
                <input type="checkbox"> iphone12promax 单价: <em>999.99</em> 
                <button class="cut">-</button><input type="text" value="0" disabled><button class="add">+</button>
                小计: <span>0</span> 元
            </li>
        </ul>
        <p>一共<span>0</span>件商品, 共<span>0.00</span>元</p>

**javascript:**

//jquery官网：https://www.bootcdn.cn/jquery/
     <script src="./js/jquery.js"></script>
        <script>
            /* 
                1. 点击全选 让复选款全部选中
            */
            $('button').eq(0).click(function () {
                $(':checkbox').prop('checked', true);
                getAll();
            });
    
            /* 
                2. 点击反选 如果复选框是选中的 变成不选中 如果是不选中 变成选中的
            */
            $('button').eq(1).click(function () {
                console.log($(':checkbox').prop('checked')); // 不可以 取值只获取复合选择器条件的第一个的值
                $(':checkbox').each(function (i, v) {
                    // console.log(i, v, $(v).prop('checked'));
                    $(v).prop('checked', !$(v).prop('checked'));
                });
    
                getAll();
            });
    
            function getAll() {
                // 计算总价
                var sum = 0;
                // console.log($(':checked').nextAll('span'));
                $(':checked').nextAll('span').each(function (i, v) {
                    console.log(i, v);
                    sum += Number($(v).html());
                });
                console.log(sum);
    
                // 计算总商品数量
                var count = 0;
                $(':checked').nextAll(':text').each(function (i, v) {
                    count += Number($(v).val());
                });
                console.log(count);
    
                // 将总价和总数量赋值给p的span
                $('p span:eq(0)').html(count);
                $('p span:eq(1)').html(sum);
            }
    
            /* 
                3. 点击 + 将输入框的个数+1 计算小计 计算总价和数量
            */
            $('.add').click(function () {
                // 获取输入框
                var n = Number($(this).prev().val()) + 1;
                console.log(n);
                var s = (n * $(this).prevAll('em').html()).toFixed(2);
                console.log($(this).prev().val(n).nextAll('span').html(s));
                getAll();
            });
    
            /* 
                4. 点击 - 将输入框的个数-1 计算小计 计算总价和数量
            */
            $('.cut').click(function () {
                // 获取输入框
               console.log($(this).next().val());
               var n = ($(this).next().val() - 1)  >= 0 ? ($(this).next().val() - 1) : 0;
               var s = (n * $(this).prevAll('em').html()).toFixed(2);
               $(this).next().val(n).nextAll('span').html(s);
               getAll();
            });
    
            /* 
                5. 当每个复选框被点击的时候 计算总价
            */
            $(':checkbox').click(function () {
                getAll();
            });
        </script>

**效果：**

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/3a663d8b51dd41b987095252cd75fa0a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/a31d12c93f1e4680b378b105112f2139.png