小电商项目实战 互动版

计算总金额


商品的状态选择和数量的加减功能我们已经实现了,选择我们就开始实现当用户选择相关商品时总金额的计算功能。

实现步骤如下:

    1. 定义公共方法,用于用户不同加、减、全选等操作时皆可调用。
    1. 循环列表内所有被选中的checkbox(假设name为chkItem)。
    1. 使用checkbox的相应属性值,来获取价格和数量。
    1. 定义全局变量(假设为sum)存储总金额并赋值显示。

具体方法实现可参考如下内容:

   sum = 0;
   $('input[name="chkItem"]:checked').each(function(){
       var self = $(this),
        price = self.attr('data-price'),
        index = self.attr('data-index');
        var quantity = $('#Q'+index).val();
        sum +=(parseFloat(price)*parseFloat(quantity));
    });
    $("金额标签").html('¥'+ sum +'.00');

到这里,选中商品的价格总计功能也就简单实现了。