我正在尝试在我的应用程序中实现购物车。当然，我已经尝试了一些方法，但是我认为这样做并不是最佳实践。我想计算价格，当用户增加商品数量时增加总额，反之亦然。我已经提出了一些建议，但其中有一部分是缺失的，这是最重要的接受条件，即：当用户从购物车中选择多个商品并更新商品时，如何计算总价总价相应吗？
这是我的代码的小提琴：JSFIDDLE。
在此示例中，我们可以看到有两个select all复选框，一个在页面顶部，另一个在页面底部。如果我单击这些select all复选框中的任何一个，则我想选择我已经做过的所有项目，也想获得所有价格的计算。这部分我需要帮助，因为我不知道实现这一目标的逻辑。另外，对于这个特定问题的任何建议或更好的方法，我都会感到高兴。预先感谢。
$(document).ready(function() {
var checkout_prices = 0.00;
var total_selected_item = 0;
$(".cart-checkbox-all").click(function() {
//console.log(total_selected_item); return;
var $this = $(this);
// console.log('yes');
if ($this.is(':checked')) {
$(".cart-checkbox-all").prop('checked', true); //check other check all button if one of them is checked
$(".cart-checkbox").prop('checked', true);
$(".cart_body").css('background-color', '#fdf7f7');
$(".checkout-btn").removeClass("btn-custom-disable disabled");
$(".checkout-btn").addClass("btn-custom-active");
total_selected_item = $(".cart_body").find('input[type="checkbox"]').length;
$(".total_selected_item").html(total_selected_item);
} else {
$(".checkout-btn").removeClass("btn-custom-active");
$(".checkout-btn").addClass("btn-custom-disable disabled");
$(".cart-checkbox-all").prop('checked', false); //uncheck other check all button if one of them is unchecked
$(".cart-checkbox").prop('checked', false);
$(".cart_body").css('background-color', '#fcfcfc');
total_selected_item = 0;
$(".total_selected_item").html(total_selected_item);
checkout_prices = 0.00;
$(".cart_checkout_price").html(checkout_prices).toFixed();
}
});
//===================================================================================================
//CONTROL CHECK BOX
$(".cart-checkbox").on('click', function() {
var a = $(".cart-checkbox").index($(this));
//console.log(a);
myClass = $(".cart-checkbox:eq(" + a + ")").attr("data-class");
if ($(".cart-checkbox:eq(" + a + ")").is(':checked')) {
//console.log('checked');
$(".cart_body:eq(" + a + ")").css('background-color', '#fdf7f7');
} else {
$(".cart_body:eq(" + a + ")").css('background-color', '#fcfcfc');
//console.log('not checked');
}
//disable check all button if no item is checked
var totalChecked = $(".cart_body").find('input[type="checkbox"]:checked').length;
if (totalChecked === 0) {
$(".cart-checkbox-all").prop('checked', false);
}
//var myprice = $(this).parent('.check_container').parent('.checkbox').siblings('.nopadding').children('.cart_total_price').children('span').html();
var myprice = $(this).parent().parent().siblings('.cart_total_price_wrap').children().children('span').html();
if ($(this).is(':checked')) {
checkout_prices = round(parseFloat(checkout_prices) + parseFloat(myprice), 2);
total_selected_item++;
$(".total_selected_item").html(total_selected_item);
$(".cart_checkout_price").html(checkout_prices);
} else {
if (totalChecked !== 0) {
checkout_prices = round(parseFloat(checkout_prices) - parseFloat(myprice), 2);
total_selected_item--;
} else {
checkout_prices = round((parseFloat(0.00) + parseFloat(myprice)), 2);
total_selected_item = 0;
}
$(".total_selected_item").html(total_selected_item);
$(".cart_checkout_price").html(checkout_prices);
}
if (totalChecked >= 1) {
$(".checkout-btn").removeClass("btn-custom-disable disabled");
$(".checkout-btn").addClass("btn-custom-active");
} else {
$(".checkout-btn").removeClass("btn-custom-active");
$(".checkout-btn").addClass("btn-custom-disable disabled");
checkout_prices = round(parseFloat(checkout_prices) - parseFloat(myprice), 2);
//console.log(checkout_price); return;
$(".cart_checkout_price").html(checkout_prices);
}
//get total number of checkbox and check if it equal to total number of checked box if so check select all button
var totalCheckbox = $(".cart_body").find('input[type="checkbox"]').length;
if (totalCheckbox === totalChecked) {
$(".cart-checkbox-all").prop('checked', true);
} else {
$(".cart-checkbox-all").prop('checked', false);
}
});
//===================================================================================================
//THIS FUNCTION CONTROLS THE LEFT AND RIGHT QUANTITY CONTROL BUTTON
$('.left-ctr').click(function() {
var qty;
var regex = /^[0-9]+$/;
qty = $(this).parent().children('input').val();
var unit_price = $(this).parent().parent().parent(".cart_qtty_wrap").siblings(".cart_price_wrap").find('.unit_price_new').html();
//if input field has a value order than numbers assign 1 to it
if (qty.match(regex)) {
qty;
} else {
$(this).parent().children("input").val('1');
}
if (qty <= 2) {
$(this).parent().children("input").val('1');
$(this).css('cursor', 'not-allowed');
//var unit_price = $(this).parent().parent(".cart_qtty").find('.unit_price_new').html();
var total_price = 1 * unit_price;
$(this).parent().parent().parent(".cart_qtty_wrap").siblings('.cart_total_price_wrap').children().children('span').html(total_price);
return false;
} else {
if (qty >= 2) {
$(this).css('cursor', 'pointer');
qty--;
$(this).parent().children("input").val(qty);
// var unit_price = $(this).parent().parent().parent(".cart_qtty_wrap").siblings('.cart_total_price_wrap').children().children('span').html();
var total_price = round(parseFloat(qty * unit_price), 2);
$(this).parent().parent().parent(".cart_qtty_wrap").siblings('.cart_total_price_wrap').children().children('span').html(total_price);
//$(this).parent().parent(".cart_qtty").siblings('.cart_total_price').children('span').html(total_price);
}
}
});
$('.right-ctr').click(function() {
var qty;
var unit_price = $(this).parent().parent().parent(".cart_qtty_wrap").siblings(".cart_price_wrap").find('.unit_price_new').html();
qty = $(this).parent().children('input').val();
if (qty >= 1) {
$(this).parent().children('.left-ctr').css('cursor', 'pointer');
}
qty++;
$(this).parent().children("input").val(qty);
//var unit_price = $(this).parent().parent().parent(".cart_qtty_wrap").siblings('.cart_total_price_wrap').children().children('span').html();
var total_price = round(parseFloat(qty * unit_price), 2);
//$(this).parent().parent(".cart_qtty").siblings('.cart_total_price').children('span').html(total_price);
$(this).parent().parent().parent(".cart_qtty_wrap").siblings('.cart_total_price_wrap').children().children('span').html(total_price);
});
//==================================================================================================
//CHECK VALUE OF UNIT MANUALLY ENTERED
$('.cart_qtty :input').on('focus', function(event) {}).on('keyup', function(event) {
var qty;
var defualt_qty = 1;
var regex = /^[0-9]+$/;
var unit_price = $(this).parent().parent().parent(".cart_qtty_wrap").siblings(".cart_price_wrap").find('.unit_price_new').html();
qty = $(this).val();
//if input field has a value order than numbers assign 1 to it
if (qty.match(regex)) {
qty;
} else {
$(this).val('1');
}
if (qty <= 1) {
$(this).val('1');
//var unit_price = $(this).parent().parent(".cart_qtty").siblings('.cart_unit_price').children('span').html();
var total_price = defualt_qty * unit_price;
$(this).parent().parent().parent(".cart_qtty_wrap").siblings('.cart_total_price_wrap').children().children('span').html(total_price);
return false;
} else {
if (qty >= 1) {
//var unit_price = $(this).parent().parent(".cart_qtty").siblings('.cart_unit_price').children('span').html();
var total_price = qty * unit_price;
$(this).parent().parent().parent(".cart_qtty_wrap").siblings('.cart_total_price_wrap').children().children('span').html(total_price);
}
}
});
});
/*
*
*
*/