jQuery编程---购物车全选反选，数量加减，总额功能的实现

目录

一、页面展示

二、功能分析+实现

1.全选，全不选功模块功能

2.增减（加/减号）商品数量，计算商品小计

3.用户修改文本框的值，计算商品小计

4.计算总数量和总价格

5.删除商品模块

6.被选中的时候会改变颜色

三、涉及知识点

1.返回指定祖先元素

2.jQuery操作样式之类操作

3.jQuery筛选方法

---

一、页面展示

二、功能分析+实现

本项目是用jQuery实现的，记得导入 jquery.min.js文件。

1.全选，全不选功模块功能

  (1) 把全选按钮的状态值 赋给 三个小按钮

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

  (2) 判断小按钮的状态值是否都被选中,在给全选框赋状态值

       $(".j-checkbox:checked").length  被选中的小按钮个数
       $(".j-checkbox").length  所有小按钮个数

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

2.增减（加/减号）商品数量，计算商品小计

  (1) 点击+号 就让这个值++，然后赋值给文本框,修改小计

$(".increment").click(function() {
      var n = $(this).siblings(".itxt").val();
      n++;
      $(this).siblings(".itxt").val(n);
      //修改商品小计（商品价格*数量）
      var p = $(this).parents(".p-num").siblings(".p-price").html();
      p = p.substr(1);
      //小计模块
      $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
});

  (2) 点击-号 就让这个值--，然后赋值给文本框,修改小计

$(".decrement").click(function() {
      var n = $(this).siblings(".itxt").val();
      if (n == 1) {
         return false;
      }
      n--;
      $(this).siblings(".itxt").val(n);
      //修改商品小计（商品价格*数量）
      var p = $(this).parents(".p-num").siblings(".p-price").html();
      p = p.substr(1);
      //小计模块
      $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
});

3.用户修改文本框的值，计算商品小计

  先得到文本框的里面的值 * 当前商品的单价

$(".itxt").change(function() {
     //文本框的值
     var n = $(this).val();
     //商品单价
     var p = $(this).parents(".p-num").siblings(".p-price").html();
     p = p.substr(1);
     //小计模块
     $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
});

4.计算总数量和总价格

  计算总数量和总价格，封装了一个求和函数，方便使用。前面点击+/-，直接修改文本框数  量，删除商品后，别忘了调用这个求和函数getSum();更新总数量总价格。

getSum();
//封装一个函数
function getSum() {
    var count = 0; //总数量
    var money = 0; //总价钱
    $(".itxt").each(function(i, ele) {
            count += parseInt($(ele).val());
    });
    $(".amount-sum em").text(count);
    $(".p-sum").each(function(i, ele) {
            money += parseFloat($(ele).text().substr(1));
    })
    $(".price-sum em").text("￥" + money.toFixed(2));
}

5.删除商品模块

（1）商品后面的删除按钮

$(".p-action a").click(function() {
      //删除的是当前的商品
      $(this).parents(".cart-item").remove();
});

（2）删除选中的商品

$(".remove-batch").click(function() {
     //删除的是小的复选框选中的商品
     $(".j-checkbox:checked").parents(".cart-item").remove();
});

（3）清空购物车,删除全部商品

$(".clear-all").click(function() {
     $(".cart-item").remove();
});

6.被选中的时候会改变颜色

  (1) 全选的时候会改变颜色     

if ($(this).prop("checked")) {
      //让所有的商品添加 check-cart-item 类名
      $(".cart-item").addClass("check-cart-item");
} else {
      //移除 check-cart-item 类名
      $(".cart-item").removeClass("check-cart-item");
}

  (2) 小的复选框被选中的时候会改变颜色

if ($(this).prop("checked")) {
     //让当前的商品添加 check-cart-item 类名
     $(this).parents(".cart-item").addClass("check-cart-item");
} else {
     //移除 check-cart-item 类名
     $(this).parents(".cart-item").removeClass("check-cart-item");
}

三、涉及知识点

1.返回指定祖先元素

（1）parent()  返回父元素

（2）parents()  返回所有祖先元素

（3）parent()  返回指定名字的祖先元素

//一级一级找祖先元素
console.log($(".four").parent().parent().parent());

//找到所有的祖先
console.log($(".four").parents());

//找到指定名字的祖先
console.log($(".four").parents(".one"));

2.jQuery操作样式之类操作

（1）添加类 addClass()

（2）删除类 removeClass()

（3）切换类 toggleClass()

3.jQuery筛选方法

（1）父 parent()  返回的是最近一级的父级元素

 console.log($(".son").parent());

（2）子 children()  find()

//亲儿子     类似子代选择器 ul>li
$(".nav").children('p').css('color', 'red');

//所有孩子    find()类似后代选择器
$(".nav").find('p').css('color', 'blue');

（3）兄 siblings()  除了自身元素之外的所有亲兄弟 nextAll（） prevAll

//nextAll   当前元素之后的所有同辈元素
//prevAll  当前元素之前的所有同辈元素 

$('ol .item').siblings('li').css('color', 'red');

（4）第n个元素  索引号从0开始

//用选择器的方式 
$("ul li:eq(2)").css('color', 'blue');

//用选择方法 
var index = 3;
$("ul li").eq(index).css('color', 'red');

（5）判断是否有某个类名  有->true  没有->false

$("div:first").hasClass('current');