jQuery仿购物车案例

今天成功解锁购物车，想要更多可能就往下看吧！！

一、全选

二、增减商品数量

三、修改商品小计

四、计算总计和总和

五、删除商品 

六、选中商品添加背景

七、html 全部核心代码

---

今天是一些购物车的基本功能实现，全选、增减商品数量、修改商品小计、计算总计和总和、删除商品、选中添加背景颜色等一些常见功能。

 html结构的全部代码都在文末了，懂的都懂啊！！！

一、全选

全选分析：

     ⭐  全选思路：里面3个小的复选框按钮（j-checkbox）选中状态（checked）跟着全选按钮（checkall）走。

     ⭐  因为checked 是复选框的固有属性，此时我们需要利用prop()方法获取和设置该属性。

     ⭐  把全选按钮状态赋值给3小复选框就可以了。

     ⭐  当我们每次点击小的复选框按钮，就来判断：

     ⭐  如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。

     ⭐  :checked 选择器 :checked 查找被选中的表单元素。

 以上是我们要实现的一个基本功能展示，接下来进入案例中来写一写。

// 全选
    $(".checkall").change(function () {
        $(".j-checkbox,.checkall").prop("checked", $(this).prop("checked"))
    });

    $(".j-checkbox").change(function () {
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
    });

二、增减商品数量

增减商品数量分析：

     ⭐  核心思路：首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。

     ⭐  注意1： 只能增加本商品的数量， 就是当前+号的兄弟文本框（itxt）的值。

     ⭐  修改表单的值是val() 方法

     ⭐  注意2： 这个变量初始值应该是这个文本框的值，在这个值的基础上++。要获取表单的值

     ⭐  减号（decrement）思路同理，但是如果文本框的值是1，就不能再减了。

点击加号数量增加，点击减少数量减少这是一个基本的加减功能的实现，最少大于等于一件商品！！

给加号和减号分别一个点击事件，然后再获取表单里面的值，用一个变量来自增自减来改变里面的值。

    // 数量 加
    $(".increment").click(function () {
        var n = $(this).siblings(".itxt").val();
        n++;
        $(this).siblings(".itxt").val(n);
    })
    // 数量 减
    $(".decrement").click(function () {
        var n = $(this).siblings(".itxt").val();
        if (n == 1) {
            return false;
        }
        n--;
        $(this).siblings(".itxt").val(n);
    });

三、修改商品小计

修改商品小计分析：

     ⭐  核心思路：每次点击+号或者-号，根据文本框的值 乘以 当前商品的价格 就是 商品的小计

     ⭐  注意1： 只能增加本商品的小计， 就是当前商品的小计模块（p-sum）

     ⭐  修改普通元素的内容是text() 方法

     ⭐  注意2： 当前商品的价格，要把￥符号去掉再相乘 截取字符串 substr(1)

     ⭐  parents(‘选择器’) 可以返回指定祖先元素

     ⭐  最后计算的结果如果想要保留2位小数 通过 toFixed(2) 方法

     ⭐  用户也可以直接修改表单里面的值，同样要计算小计。 用表单change事件

     ⭐  用最新的表单内的值 乘以 单价即可 但是还是当前商品小计