jQuery Simulates Taobao Shopping Cart Function

  • 2021-07-24 09:53:51
  • OfStack

First of all, the requirements of the content we want to implement are as follows:

1. On the shopping cart page, when the "Select All" check box is selected, the check box before all items is selected, otherwise the check box for all items is unselected.

2. When the check box before all items is selected, the "Select All" check box is selected, otherwise the "Select All" check box is unselected.

3. When you click the icon-, the quantity is reduced by 1 and the item cannot be less than 0 and the total price and points of the item will change accordingly.

4. When the icon + is clicked, the quantity increases and the total price and points of goods change accordingly.

5. Click Delete Selected to delete the item selected by the user, and click Delete to delete the item, so that the total price and points of the item will change accordingly.

Let's start with the code:


$(function () {
  subtotal();
  addorminus();
  allcheckbox();
  delet();
  deleselect();
 });
 // Settings   Get integral sum 1 Total amount function 
 function countmoney() {
  var money = 0; // Total amount 
  var jifen = 0; // Total integral 
  $(".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);
 }
 // Subtotal 
 function subtotal() {
  var obj = $(".cart_td_7");
  obj.each(function () {       //each Traverse every 1 A clss For .card_td_7 Elements of 
  var num = $(this).siblings(".cart_td_6").children("input").val(); // Shopping cart   Current Quantity Selected 
  var price = $(this).siblings(".cart_td_5").html();   // Of the currently selected item price
  var money = num * price;      // Subtotal 
  $(this).html(money);
  });
  countmoney();
 }
 // Add or Decrease Quantity 
 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();
  });
 }
 // Choose all or not at all 
 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);
  }
  });
 }
 // Delete 
 function delet() {
  $(".cart_td_8>a").live("click", function () {
  $(this).parent().parent().prev().remove();
  $(this).parent().parent().remove();
  subtotal();
  });
 }
 // Delete selected  
 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();
  });
 }

Related articles: