jQuery计算选中商品总数和金额

问题描述

在跟随某pink学习jQuery第396节内容时，他故意留了个小bug：在购物车结算页面，商品的总数和金额并非是选中的值，而是所有的值，这就会导致单选和全选功能不起作用，出现如下情况：

// 5.计算商品的总数和总价
    function getSum() {
        var totalNum = 0;
        var totalMoney = 0;
        // 获取到所有选中单选框的父亲节点同级别有p-num的兄弟节点，查找这个节点下属的itxt，这里就是单个商品小计，以此达到只计算
        // 选中的商品全部总量和商品总金额
        // 最后记得将函数添加到上面单选按钮的change函数和全选按钮的change函数中去
        $('.itxt').each(function (i, domEle) {
            // 这里的商品总数一定要取整
            totalNum += parseInt($(domEle).val());
        });
        // 将每个数量输入框中的值最后的和赋值给总计的数量
        $('.amount-sum em').text(totalNum);
        $('.p-sum').each(function (i, ele) {
            totalMoney += (parseFloat($(ele).text().substr(1)));
        });
        // 这里商品金额需要取2位小数
        $('.price-sum em').text('￥' + totalMoney.toFixed(2));
    }

---

原因分析：

出现这个问题的原因是因为计算的商品总数和总金额的数值并没有进行筛选，需要筛选出来被选中的单选框然后再遍历总数和总金额。

---

解决方法

获取到所有选中单选框的父亲节点同级别有p-num的兄弟节点，使用find方法查找这个节点下属的itxt，这里就是单个商品数量小计，然后再进行遍历，总金额与之类似。

// 5.计算商品的总数和总价
      // 5.计算商品的总数和总价
    function getSum() {
        var totalNum = 0;
        var totalMoney = 0;
        // 获取到所有选中单选框的父亲节点同级别有p-num的兄弟节点，查找这个节点下属的itxt，这里就是单个商品小计，以此达到只计算
        // 选中的商品全部总量和商品总金额
        // 最后记得将函数添加到上面单选按钮的change函数和全选按钮的change函数中去
        $('.j-checkbox:checked').parents().siblings('.p-num').find('.itxt').each(function (i, domEle) {
            // $('.itxt').each(function (i, domEle) {
            // 这里的商品总数一定要取整
            totalNum += parseInt($(domEle).val());
        });
        // 将每个数量输入框中的值最后的和赋值给总计的数量
        $('.amount-sum em').text(totalNum);
        $('.j-checkbox:checked').parents().siblings('.p-sum').each(function (i, ele) {
            // $('.p-sum').each(function (i, ele) {
            totalMoney += (parseFloat($(ele).text().substr(1)));
        });
        // 这里商品金额需要取2位小数
        $('.price-sum em').text('￥' + totalMoney.toFixed(2));
    }

解决效果：