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();
});
}