jQuery模拟淘宝购物车功能

首先我们要实现的内容的需求有如下几点：1.在购物车页面中，当选中“全选”复选框时，

首先我们要实现的内容的需求有如下几点：

1.在购物车页面中，当选中“全选”复选框时，所有商品前的复选框被选中，否则所有商品的复选框取消选中。

2.当所有商品前的复选框选中时，“全选”复选框被选中，否则“全选”复选框取消选中。

3.单击图标-的时候数量减一而且不能让物品小于0并且商品总价与积分随之改变。

4.单击图标+的时候数量增加并且商品总价与积分随之改变。

5.单击删除所选将删除用户选中商品，单击删除则删除该商品即可并达到商品总价与积分随之改变。

下面我们就开始进入代码:

$(function () {
 subtotal();
 addorminus();
 allcheckbox();
 delet();
 deleselect();
 });
 //设置 获取积分和一共金额函数
 function countmoney() {
 var money = 0; //总金额
 var jifen = 0; //总积分
 $(".cart_td_7").each(function () {
 var m = $(this).text();
 money += Number(m);
 var j = $(this).siblings(".cart_td_4").text();
 var number = $(this).siblings(".cart_td_6").children("input").val();
 jifen += Number(j * number);
 });
 $("#total").html(money);
 $("#integral").html(jifen);
 }
 //小计
 function subtotal() {
 var obj = $(".cart_td_7");
 obj.each(function () { //each遍历每一个clss为.card_td_7的元素
 var num = $(this).siblings(".cart_td_6").children("input").val(); //购物车 选中的当前数量
 var price = $(this).siblings(".cart_td_5").html(); //当前选中物品的price
 var money = num * price; //小计
 $(this).html(money);
 });
 countmoney();
 }
 //添加或减少数量
 function addorminus() {
 $(".hand").on("click", function () {
 var num;
 if ($(this).attr("alt") == "minus") {
 num = $(this).next().val();
 if (num == 1) {
 $(this).css("display", "none");
 } else {
 $(this).next().val(--num);
 }
 } else {
 num = $(this).prev().val();
 $(this).prev().val(++num);
 if (num == 1) {
 $(this).siblings("[alt==minus]").css("display", "visible");
 } else { } 
 }
 subtotal();
 });
 }
 //全选或者全不选
 function allcheckbox() {
 $("#allCheckBox").live("change", function () {
 if ($(this).attr("checked") == "checked") {
 $("[name=cartCheckBox]").attr("checked", "checked");
 } else {
 $("[name=cartCheckBox]").attr("checked", false);
 }
 });
 $("[name=cartCheckBox]").live("change", function () {
 var bool = true;
 $("[name=cartCheckBox]").each(function () {
 if ($(this).attr("cheked") != "checked") {
 bool = false;
 }
 });
 if (bool) {
 $("#allCheckBox").attr("checked", "checked");
 } else {
 $("#allCheckBox").attr("checked", false);
 }
 });
 }
 //删除
 function delet() {
 $(".cart_td_8>a").live("click", function () {
 $(this).parent().parent().prev().remove();
 $(this).parent().parent().remove();
 subtotal();
 });
 }
 //删除所选 
 function deleselect() {
 $("#deleteAll>img").live("click", function () {
 $("[name=cartCheckBox]").each(function () {
 if ($(this).attr("checked") == "checked") {
 $(this). parent().parent().prev().remove();
 $(this).parent().parent().remove();
 }
 });
 subtotal();
 });
 }

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！