How to compute total price based on checkboxes

Question

In our website I have a cart table that contains all of the items. Each row has checkboxes. By clicking the checkboxes, it will determine the total price of your cart the you will checkout. At first I don't know what the title of my question should be as I have 2 problems.

First, when I clicked all the checkboxes, the Select all checkbox will be checked, and if I unchecked one, the Select all will be unchecked.

Second, is properly getting the total prices based on checkboxes. I am able to get the total price when I tick the checkboxes. It all adds up but if I tick the Select all while all other checkboxes are checked, it adds another total which is not right. Please see the demo I uploaded. Total Price Computation Demo

I'm guessing its because I have put computation in Select all also, but I actually run out of ideas on how to achieve this.

Here are my codes

Table

get_data("SELECT * FROM vw_cart_items ORDER BY cart_itemID DESC");
            if(!empty($cart_items)){
                if(is_array($cart_items) || is_object($cart_items)){
                    foreach($cart_items as $cart_item){
        ?>
        
    
        
            
            Preview
            Product
            Price
            Quantity
            Total
            
        
    
    
        
            
            
                
            
            
            ₱ 
            
                
                    
                        
                    
                    
                    
                        
                    
                
            
            ₱

Script

var overall_total = 0;

$('.select_all').on('change', function(){
    $('.cart_checkbox').not(this).prop('checked', this.checked);

    if($(this).is(":checked")) {
        $('.total_price').each(function(){
            total_price = $(this).data('total_price');
            overall_total = overall_total + parseFloat(total_price);
        });
    }else{
        $('.total_price').each(function(){
            total_price = $(this).data('total_price');
            overall_total = overall_total - parseFloat(total_price);
        });
    }
    $('.overall_total').text(formatToCurrency(overall_total));
});

$(".cart_checkbox").change(function(){
    var total_price = $(this).closest('tr').find('.total_price').data('total_price');

    if($(this).is(":checked")) {
        overall_total = overall_total + parseFloat(total_price);
    }else{
        overall_total = overall_total - parseFloat(total_price);
    }
    $('.overall_total').text(formatToCurrency(overall_total));
})

user_10606400 · Answer

For your first issue you can check if the length of total checkboxes and checked checkboxes are not equal depending this check/uncheck your select_all checkbox .

Now, for next issue i have move whole calculation part inside different function so whenever you need to total you can call this function and then loop through only checked trs row and change total values .

Demo Code :

$('.select_all').on('change', function() {
  $('.cart_checkbox').not(this).prop('checked', this.checked);
  sum(); //call this 
});

$(".cart_checkbox").change(function() {
  var total_length = $(".cart_checkbox").length;
  var checked_length = $(".cart_checkbox:checked").length
  //check if length less then total
  if (checked_length < total_length) {
    $('.select_all').prop('checked', false); //uncheck..
  } else {
    $('.select_all').prop('checked', true); //check
  }
  sum(); //call this
})

function sum() {

  var overall_total = 0;
  //loop through only checked trs..
  $(".cart_checkbox:checked").closest("tr").find('.total_price').each(function() {
    total_price = $(this).data('total_price');
    overall_total = overall_total + parseFloat(total_price);
  })
  $('.overall_total').text(overall_total); //add your format fn
}

user_9695286 · Answer

Just make overall_total = 0 inside your $('.select_all').on('change' and it should work. And remove else portion.

$('.select_all').on('change', function(){
    
    $('.cart_checkbox').not(this).prop('checked', this.checked);
    // reset total value to 0 because in below every product values are being fetched and summed up.
    overall_total = 0;

    if($(this).is(":checked")) {
        $('.total_price').each(function(){
            total_price = $(this).data('total_price');
            overall_total = overall_total + parseFloat(total_price);
        });
    }
    //else{
    //    $('.total_price').each(function(){
    //        total_price = $(this).data('total_price');
    //        overall_total = overall_total - parseFloat(total_price);
    //    });
    //}

    $('.overall_total').text(formatToCurrency(overall_total));
});

How to compute total price based on checkboxes

2 Answers