【jquery】购物车-全选与全不选，修改商品背景颜色，删除商品，增减商品数目并计算总价格

本文主要是介绍【jquery】购物车-全选与全不选，修改商品背景颜色，删除商品，增减商品数目并计算总价格，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

jquery实现购物车功能

- 1-实现购物车全选与全不选，选中添加商品背景颜色
- - 1.1 全选和全不选
  - 1.2 选中商品添加背景
- 2-实现购物车增减商品数目并计算价格
- - 2.1 用户通过点击“+”“-”修改商品数目
  - 2.2 用户直接通过文本框输入数值而修改商品数目
  - 2.3 计算商品总金额
- 3-删除商品

全部代码：

https://download.csdn.net/download/sanqianjia/13287623

1-实现购物车全选与全不选，选中添加商品背景颜色

效果如下：
在这里插入图片描述

1.1 全选和全不选

分析：
1-全部思路：里面3个小的复选框按钮（j-checkbox）选中状态（checked）跟着全选按钮（checkall）走
2-因为checked是复选框的固有属性，此时需要利用prop()方法获取和设置该属性
3-把全选按钮状态赋值给3个小复选框就可以了
4-当每次点击小的复选框按钮时就进行判断
5-如果小复选框被选中的个数等于3就应该把全选按钮选上，否则全选按钮不选
6-当选择上面的全选时最下面的全选和所有选项都被选中
7-当选中所有的选项时，两个全选的选项也显示被选中

1.2 选中商品添加背景

分析：
1-核心思路：选中的商品添加背景，不选中移除背景即可
2-全选按钮点击：如果全选是选中的，则所有的商品添加背景，否则移除背景
3-小的复选框点击：如果是选中状态，则当前商品添加背景，否则移除背景
4-这个背景，可以通过类名修改，添加类和删除类

  // 1. 全选 全不选功能模块// 就是把全选按钮（checkall）的状态赋值给 三个小的按钮（j-checkbox）就可以了// 事件可以使用change$(".checkall").change(function() {$(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));if ($(this).prop("checked")) {// 让所有的商品添加 check-cart-item 类名$(".cart-item").addClass("check-cart-item");} else {// check-cart-item 移除$(".cart-item").removeClass("check-cart-item");}getSum();});// 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。$(".j-checkbox").change(function() {// if(被选中的小的复选框的个数 === 3) {//     就要选中全选按钮// } else {//     不要选中全选按钮// }// $(".j-checkbox").length 这个是所有的小复选框的个数if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {$(".checkall").prop("checked", true);} else