jquery实现购物车功能
全部代码:
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 {
$(".checkall").prop("checked", false);
}<