思路
1.给tbody一个id=”shopList” 当进入购物车时如果有两个商品被勾选了，需要计算出总价钱
2.当手动勾选商品时，也要把相应的价格加到总价中去
3.给全选添加一个id=”checkAll”当勾选全部选中时，要计算所有商品的总价要注意的是：这个函数，当单选是也要触发，因为当全部商品都勾选时也就相当调用了这个函数
4.当再次点击全选时取消所有产品
5.当点击+加号时也要计算
6.当点击-加号时也要计算
7.文本框中也可以直接输入，这里需要校验的地方比较多
8.当点击删除时，将选中的商品移除
代码思路
1.首先计算总价
totalPrice();
function totalPrice(){
//获取所有商品列表
var lists = $('#shopList tr');
var total = 0;//这里是后添加的；
//循环遍历
lists.each(function(){
//遍历的结果this会是tr标签，也就是js对象，我们要转换为Jquery对象
var _vm = $(this);
//获取所有选中的商品
var isChecked = _vm.find('.checkbox').prop('checked');
//判断当商品勾选时，计算总价
if(isChecked){
//获取单价 *1乘1就会把字符串转换为数字
var price = _vm.find('.price').text()*1;
var num = _vm.find('.num').val()*1;
//总价就是两者相乘，在循环体的外面定义一个total变量用来存值
total += price*num;
}
});
//循环后将所得结果添加到页面
$('#total').text(total);
}
2.点击勾选商品，改变总价
checkEvent();
function checkEvent(){
//这里采用的是委托代理方式，通过冒泡机制，实现效果
//通过给父级一个click代理效果，所有的子集当单击时都会触发这个效果
//我们这里又添加一个筛选，只有.checkbox才会触发这个效果
$('#shopList').on('click','.checkbox',function(){
//调用计算系统
totalPrice();
//调用全选函数isCheckAll();没勾选一次都要判断
//是否全部选中了
isCheckAll();
});
};
3.全部选中时的总价格
isCheckAll();
function isCheckAll(){
//判断勾选的个数和总个数是否相同
var len = $('#shopList .checkbox').length;
var clen = $('#shopList .checkbox:checked').length;
if(len === clen){
$('#checkAll').prop('checked',true);
}else{
$('#checkAll').prop('checked',false);
}
};
//上面的代码简化为一行
function isCheckAll(){
$('#checkAll').prop('checked',$('#shopList .checkbox').length === $('#shopList .checkbox:checked').length);
};
4.判断全选是否是选中状态
checkAllEvent();
function checkAllEvent(){
$('#checkAll').click(function(){
//之前的思路：当点击时获取checkbox的状态，如果是勾选就去掉，不是就勾选，很绕
//下面的思路：不管之前甚么状态，获取的点击后的状态，如果是勾选就设置为勾选，反之一样
$('#shopList .checkbox').prop('checked',$(this).prop('checked'));
//再次调用一次计算系统;
totalPrice();
});
};
5.单击加号+计算价格
addEvent();
function addEvent(){
//这里和checkbox一样也用委托代理
$('#shopList').on('click','.add',function(){
//将js对象转换为jquery对象
var _vm = $(this);
var num = _vm.prev().val()*1;//获取数值
num++;
_vm.prev().val(num);//改变后在赋值回去
totalPrice();
//因为当点击加号时，如果没有勾选商品，就变得没有意义，所以要勾选商品
//勾选时，那就要判断是否全选了商品，若是都选了，那么全选按钮就要被选中
isCheckAll();
});
//这里的代码可以优化下，将_vm.prev()对象存储一下
//因为获取dom节点的过程是比较耗性能的，所以存储下好；
}
6.单击减号-计算价格
minusEvent();
function minusEvent(){
$('#shopList').on('click','.minus',function(){
var _vm = $(this);
var numNode = _vm.next();//获取减号所在的下一个截点对象；
var num = numNode.val()*1;
if(num >1){
num--;//只有大于1的时候才减
}
numNode.val(num);
totalPrice();
isCheckAll();
});
};
7.文本框中直接改变数值
numEvent();
function numEvent(){
$('#shopList').on('keyup','.num',function(){
var _vm = $(this);
var num = _vm.val();
num = num.replace(/[^d]+/g,'').replace(/^0+/,'');
_vm.val(num);
if(num){
totalPrice();
isCheckAll();
}
}).on('blur','.num',function(){
var _vm = $(this);
var num = _vm.val();
if(!num){
_vm.val(1);
}
totalPrice();
isCheckAll();
});
};
8.删除
delEvent();
function delEvent(){
$('#shopList').on('click','.col_width_9 span',function(){
var isDel = confirm('您确定要删除么？');
if(isDel){
$(this).parents('tr').remove();
totalPrice();
}
});
}