购物车前端开发（jQuery和bootstrap3）

 
 
 
 
 


 

 

 

 
 全选
 
产品型号
 
单价
 
数量
 
小计
 
操作
 
 
 
 

 

 
 
 

  Item 1
 
 
76.55
 

  -
  
  +
 
 
101
 
删除
 
 

 

 

  Item 2
 
 
1100
 

  -
  
  +
 
 
352
 
删除
 
 

 

 

  Item 3
 
 
1200
 

  -
  
  +
 
 
9876.55
 
删除
 
 

 

 

  Item 4
 
 
1400
 

  -
  
  +
 
 
9876.55
 
删除
 
 
 

 

 

 

 

  金额合计:￥0.00
 
 

  您选择了种产品型号，共计件
 
 

  
 
 
 
 

$(cartTable).find(":checkbox").click(function() {
  //全选框单击
  if ($(this).hasClass("check-all")) {
   var checked = $(this).prop("checked");
   $(cartTable).find(".check-one").prop("checked", checked);
  }

  //如果手工一个一个的点选了所有勾选框，需要自动将“全选”勾上或是取消
  var items = cartTable.find("tr:gt(0)");
  $(cartTable).find(".check-all").prop("checked", items.find(":checkbox:checked").length == items.length);

  getTotal();
 });

 /*
  * 计算购物车中每一个产品行的金额小计
  *
  * 参数 row 购物车表格中的行元素tr
  *
  */
 function getSubTotal(row) {
 var price = parseFloat($(row).find("span:first").text()); //获取单价
  var qty = parseInt($(row).find(":text").val()); //获取数量
  var result = price * qty; //计算金额小计
  $(row).find(".subtotal").text(result.toFixed(2)); //将计算好的金额小计写入到“小计”栏位中
 };

 /*
  * 计算购物车中产品的累计金额
  *
  *
  */
 function getTotal() {
 var qtyTotal = 0;
  var itemCount = 0;
  var priceTotal = 0;
  $(cartTable).find("tr:gt(0)").each(function() {
  if ($(this).find(":checkbox").prop("checked") == true) { //如果选中
    itemCount++; //累加产品品种数量
    qtyTotal += parseInt($(this).find(":text").val()); //累计产品购买数量
    priceTotal += parseFloat($(this).find(".subtotal").text()); //累计产品金额
   }
  });    $("#itemCount").text(itemCount);
  $("#qtyCount").text(qtyTotal);
 $("#priceTotal").text(priceTotal.toFixed(2));
 };

//为数量调整的＋ －号提供单击事件，并重新计算产品小计
 /*
  * 为购物车中每一行绑定单击事件，以及每行中的输入框绑定键盘事件
  * 根据触发事件的元素执行不同动作
  * 增加数量
  * 减少数量
  * 删除产品
  *
  */
 $(cartTable).find("tr:gt(0)").each(function() {
 var input = $(this).find(":text"); 
 //为数量输入框添加事件，计算金额小计，并更新总计
 $(input).keyup(function() {
 var val = parseInt($(this).val());
 if (isNaN(val) || (val <1)) { $(this).val("1"); }
  getSubTotal($(this).parent().parent()); //tr element
  getTotal();
 });

 //为数量调整按钮、删除添加单击事件，计算金额小计，并更新总计
 $(this).click(function() {
 var val = parseInt($(input).val());
 if (isNaN(val) || (val <1)) { val = 1; }

 if ($(window.event.srcElement).hasClass("minus")) {
   if (val > 1) val--;
   input.val(val);
   getSubTotal(this);
  }
  else if ($(window.event.srcElement).hasClass("plus")) {
   if (val <9999) val++;
  input.val(val);
 getSubTotal(this);
  }
  else if ($(window.event.srcElement).hasClass("delete")) {
   if (confirm("确定要从购物车中删除此产品？")) {
    $(this).remove();
 }
  }
   getTotal();
 });