How can i sum up all the prices from checkbox selection?

I want to sum up all the prices when user select the checkbox

<ion-item no-lines *ngFor="let details of size;">
        <ion-checkbox item-left formControlName="size" (ionChange)="selectSize(details.size, $event)"></ion-checkbox>
        <ion-label>
          <ion-row>
            <ion-col col-6>
              <h5>{{details.size}}</h5> 
            </ion-col>
            <ion-col col-2>
              {{details.discounted_price_pretty}}
            </ion-col>
          </ion-row>
        </ion-label>
      </ion-item>

<ion-list *ngFor="let addon_cat of addon_cat">
        <ion-list-header>
          {{addon_cat.subcat_name}}
        </ion-list-header>
        <ion-item no-lines *ngFor="let addonitem of addon_subitem">
          <ion-checkbox item-left formControlName="addon" (ionChange)="selectAddon(addonitem.sub_item_name, $event)">
          </ion-checkbox>
          <ion-label style="font-size: 12px;">
            <ion-row>
              <ion-col col-8>
                <h5>{{addonitem.sub_item_name}}</h5>
                <p>{{addonitem.item_description}}</p>
              </ion-col>
              <ion-col col-4>
                <h5>{{addonitem.pretty_price}}</h5>
              </ion-col>
            </ion-row>
          </ion-label>
        </ion-item>
      </ion-list>

Any Help is highly appreciated :slight_smile:

which problem do you have? You are not able to retrieve the value and add it to another value?

You can cycle your json and do the sum for all the records that have “checked=true”
Or you can add the value to a variable each time the user click on the checkbox.

<ion-checkbox 
item-left 
formControlName="size" 
(ionChange)="selectSize(details.size, $event)"></ion-checkbox>
``

How can i retrieve 2 values from one selected checkbox?
Like the name & price?
& then add the prices of the values which is selected

Can you show some example?
please help

In your .html file you cycle all the checkbox that you will display on your page. For each checkbox you must pass the data of the element that it’s checked, included the price.

 <ion-list>
      <ion-item class="item_borded" *ngFor="let x of json_data;">
        <ion-checkbox item-right color="primary" (ionChange)="onChange(x, $event.checked)"></ion-checkbox>
        <ion-label text-wrap>{{x.name}}</ion-label>
        <ion-label fixed text-right>€ {{x.price}}</ion-label>
      </ion-item>
  </ion-list>

In your .ts file retrieve the price of the checked element and you add it to your total.

var total_price;
  onChange(data, isChecked: boolean) {
      if(isChecked){
            let price =  data.price; //the price of the element that you checked
            this.total_price+= price;  // add the price of the checked element to a variable that will contain the total of the prices
      }else {
           //if is not checked you must subtract the price if the price was previously added
       }
   }

Hope it helps :smiley:

1 Like

Okie i got it :slight_smile:

let a = this.Price1 ? parseFloat(this.Price1) : 0;
let b = this.Price2 ? parseFloat(this.Price2) : 0;
console.log(a + b);

but something is still isnt right :frowning: i am getting the click event history as well.
How can i get the data of only checked checkboxes and not of the checkboxes checked history :frowning:

I hope you got my doubt

I don’t understand the problem…when you click on the checkbox you add only if the checkbox it’s checked, not at every click.

if(isChecked) in my code it’s for checking only if the checkbox it’s checked.

I tried this method and it calculating only the last value of checkbox where i have 2 list of checkbox in which one has select option of anyone and another one i have multiple select option.

<ion-item no-lines *ngFor="let details of size; let i=index" style="font-size: 12px;">
 <ion-checkbox item-left formControlName="size"
          (ionChange)="selectSize(details.size, details.discounted_price, $event.checked)"> // here i want multiple checkbox to be selected
        </ion-checkbox>
</ion-item>
<ion-item *ngFor="let addonitem of addon; let i = index" >

    <ion-checkbox item-left formControlName="addOn" (ionChange)="selectAddon(addonitem.sub_item_name,addonitem.price, $event)" [ngModel]="checkedIdx == i" (ngModelChange)="$event ? checkedIdx = i : checkedIdx = -1"> // 
        </ion-checkbox>

<ion-item>

The Output i am getting is as such

its adding only last value and not of the selected checkboxes

Can I see your .ts file?

selectSize(size, discounted_price_pretty, isChecked: boolean) {
    if (isChecked) {
      this.selectedSize.push(size);
      this.selectedSizePrice.push(discounted_price_pretty);
    }
  }

  selectAddon(sub_item_name, pretty_price, ev) {
    if (ev) {
      this.selectedAddOn.push(sub_item_name);
      this.addOnPrice.push(pretty_price);

    }
  }

setSize() {
    let getSizeDetails = {
      size: this.selectedSize,
      price: this.selectedSizePrice,
    }
    return getSizeDetails;
  }
  setAdon() {
    let getAddon = {
      AddOn: this.selectedAddOn,
      AddOnPrice: this.addOnPrice,
    }
    return getAddon;
  }

 createCustomization() {
    let a = this.selectedSizePrice ? parseFloat(this.selectedSizePrice) : 0;
    let b = this.addOnPrice ? parseFloat(this.addOnPrice) : 0;
    this.totalprice = a + b;


    console.log(this.setSize())
    console.log(this.setAdon())
    console.log("Total Price:", this.totalprice);


Are you sure that doing this you retrieve all the addon prices?
let b = this.addOnPrice ? parseFloat(this.addOnPrice) : 0;
What b contains?

I’m not sure that you are working properly with all the prices that you retrieve.

No it just adding up the last value of addonitem
Please help how can I get through this?

You should cycle the price array/json and sum every price. Can you do this?

Tried many ways but unable to find the accurate method :frowning: Please help

var total_price;
  onChange(data, isChecked: boolean) {
      if(isChecked){
            let price =  data.price; //the price of the element that you checked
            this.total_price+= price;  // add the price of the checked element to a variable that will contain the total of the prices
      }else {
           //if is not checked you must subtract the price if the price was previously added
       }
   }

this method gives me an output of “98undefined4242” if the checkbox value 98 , 42 & 42

public getTotal() {
    let total = 0;
    for (var i = 0; i < this.addOnPrice.length; i++) {
      if (this.addOnPrice[i]) {
        total += +this.addOnPrice[i];
      }
    }
    return total;
  }

Try to parseInt(this.addOnPrice[i], 10) in the if condition

im getting the same result :frowning:

Try to change
total += this.addOnPrice[i];
in
total += +this.addOnPrice[i];

Thank you so much it worked finally.
I heartily appreciate your help :slight_smile:

1 Like

Glad I helped :smiley: