首先我们要实现的内容的需求有如下几点:
1.在购物车页面中,当选中“全选”复选框时,所有商品前的复选框被选中,否则所有商品的复选框取消选中。
2.当所有商品前的复选框选中时,“全选”复选框被选中,否则“全选”复选框取消选中。
3.单击图标-的时候数量减一而且不能让物品小于0并且商品总价与积分随之改变。
4.单击图标+的时候数量增加并且商品总价与积分随之改变。
5.单击删除所选将删除用户选中商品,单击删除则删除该商品即可并达到商品总价与积分随之改变。
下面我们就开始进入代码:
1 $(function () { 2 3 subtotal(); 4 addorminus(); 5 allcheckbox(); 6 delet(); 7 deleselect(); 8 }); 9 //设置 获取积分和一共金额函数 10 function countmoney() { 11 var money = 0; //总金额 12 var jifen = 0; //总积分 13 $(".cart_td_7").each(function () { 14 var m = $(this).text(); 15 money += Number(m); 16 var j = $(this).siblings(".cart_td_4").text(); 17 var number = $(this).siblings(".cart_td_6").children("input").val(); 18 jifen += Number(j * number); 19 }); 20 $("#total").html(money); 21 $("#integral").html(jifen); 22 } 23 //小计 24 function subtotal() { 25 var obj = $(".cart_td_7"); 26 obj.each(function () { //each遍历每一个clss为.card_td_7的元素 27 var num = $(this).siblings(".cart_td_6").children("input").val(); //购物车 选中的当前数量 28 var price = $(this).siblings(".cart_td_5").html(); //当前选中物品的price 29 var money = num * price; //小计 30 $(this).html(money); 31 }); 32 33 countmoney(); 34 35 } 36 //添加或减少数量 37 function addorminus() { 38 $(".hand").on("click", function () { 39 var num; 40 if ($(this).attr("alt") == "minus") { 41 num = $(this).next().val(); 42 if (num == 1) { 43 $(this).css("display", "none"); 44 } else { 45 $(this).next().val(--num); 46 } 47 } else { 48 num = $(this).prev().val(); 49 $(this).prev().val(++num); 50 if (num == 1) { 51 $(this).siblings("[alt==minus]").css("display", "visible"); 52 53 } else { } 54 } 55 subtotal(); 56 }); 57 } 58 59 //全选或者全不选 60 function allcheckbox() { 61 $("#allCheckBox").live("change", function () { 62 if ($(this).attr("checked") == "checked") { 63 $("[name=cartCheckBox]").attr("checked", "checked"); 64 } else { 65 $("[name=cartCheckBox]").attr("checked", false); 66 } 67 68 }); 69 70 $("[name=cartCheckBox]").live("change", function () { 71 var bool = true; 72 $("[name=cartCheckBox]").each(function () { 73 if ($(this).attr("cheked") != "checked") { 74 bool = false; 75 } 76 }); 77 if (bool) { 78 $("#allCheckBox").attr("checked", "checked"); 79 80 } else { 81 82 $("#allCheckBox").attr("checked", false); 83 } 84 }); 85 } 86 //删除 87 function delet() { 88 $(".cart_td_8>a").live("click", function () { 89 $(this).parent().parent().prev().remove(); 90 $(this).parent().parent().remove(); 91 subtotal(); 92 }); 93 94 } 95 //删除所选 96 function deleselect() { 97 $("#deleteAll>img").live("click", function () { 98 $("[name=cartCheckBox]").each(function () { 99 if ($(this).attr("checked") == "checked") { 100 $(this). parent().parent().prev().remove(); 101 $(this).parent().parent().remove(); 102 } 103 }); 104 subtotal(); 105 }); 106 }