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

harshm90 · February 25, 2019, 11:29am

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

JEricaM · February 25, 2019, 12:30pm

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.

harshm90 · February 25, 2019, 1:02pm

<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

harshm90 · February 25, 2019, 1:04pm

Can you show some example?
please help

JEricaM · February 25, 2019, 1:49pm

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

harshm90 · February 26, 2019, 5:43am

Okie i got it

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 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

I hope you got my doubt

JEricaM · February 26, 2019, 8:03am

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.

harshm90 · February 26, 2019, 9:36am

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

JEricaM · February 26, 2019, 9:54am

Can I see your .ts file?

harshm90 · February 26, 2019, 10:03am

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

JEricaM · February 26, 2019, 10:08am

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.

harshm90 · February 26, 2019, 10:11am

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

JEricaM · February 26, 2019, 1:27pm

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

harshm90 · February 27, 2019, 9:55am

Tried many ways but unable to find the accurate method 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

harshm90 · February 27, 2019, 10:00am

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

Zeitoun · February 28, 2019, 9:50am

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

harshm90 · February 28, 2019, 10:46am

im getting the same result

JEricaM · February 28, 2019, 11:41am

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

harshm90 · February 28, 2019, 11:44am

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

JEricaM · February 28, 2019, 12:00pm

Glad I helped

Topic		Replies	Views
How to retrieve multiple values from selected checkbox? ionic-v3	3	1424	February 25, 2019
How check if checkbox is checked? And how sum a value? ionic-v3	0	602	February 13, 2019
IonChange selected value Sum ionic-v3	25	8869	August 5, 2017
Ionic - Get values from multiple checkboxes in ngFor loop ionic-v3	6	11139	July 19, 2021
Get vales from Ion-checkbox ionic-v3	7	3087	July 19, 2021

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

Related topics