How to change the value of a JSON key when a checkbox is ticked?

Question

**NOTE - i want "all" to be updated in my objects as the checkboxes are checked or unchecked. Also when the page is loaded i want the value of "all" to be the sum of values in front of those three checkboxes **

Note - values in front of checkboxes are not labels of checkboxes they are different divs

I have made a shopping cart kind of page and added sample products in it through json data in my js file. This calculates the subtotal and grandtotal of all the items. Now i have added three checkboxes in each item, which are pre-checked. So, what i want to achieve is that when i uncheck or recheck the checkboxes their value gets subtracted from subtotal and subsequently from grand total. what i have tried so far is in the js.fiddle given below.

https://jsfiddle.net/darkshadow_999/3Lqmobpt/5/

also currently i am trying this code to handle checkboxes. But this code is modifying the subtotals of all the items and subtotal is getting reset on increasing or decreasing the items.

    $(document).on("click",function () {
    var breakcheck = $("#breakfast_check"),
        lunchcheck = $("#lunch_check"),
        dinnercheck = $("#dinner_check");
    if($(breakcheck).is(":checked") && $(lunchcheck).is(":checked") && $(dinnercheck).is(":checked")){
        app.products = app.products.map(({name, breakfast_price, lunch_price, dinner_price}) =>
            ({
                name,
                breakfast_price,
                lunch_price,
                dinner_price,
                "all": ((+breakfast_price) + (+lunch_price) + (+dinner_price)).toFixed(2)
            }));
    }
    else if($(breakcheck).is(":checked") && !$(lunchcheck).is(":checked") && $(dinnercheck).is(":checked")){
        app.products = app.products.map(({name, breakfast_price, lunch_price, dinner_price}) =>
            ({
                name,
                breakfast_price,
                lunch_price,
                dinner_price,
                "all": ((+breakfast_price) + (+dinner_price)).toFixed(2)
            }));
    }
    else if($(breakcheck).is(":checked") && $(lunchcheck).is(":checked") && !$(dinnercheck).is(":checked")){
        app.products = app.products.map(({name, breakfast_price, lunch_price, dinner_price}) =>
            ({
                name,
                breakfast_price,
                lunch_price,
                dinner_price,
                "all": ((+breakfast_price) + (+lunch_price)).toFixed(2)
            }));
    }
    else if(!$(breakcheck).is(":checked") && $(lunchcheck).is(":checked") && $(dinnercheck).is(":checked")){
        app.products = app.products.map(({name, breakfast_price, lunch_price, dinner_price}) =>
            ({
                name,
                breakfast_price,
                lunch_price,
                dinner_price,
                "all": ((+lunch_price) + (+dinner_price)).toFixed(2)
            }));
    }
    else if(!$(breakcheck).is(":checked") && !$(lunchcheck).is(":checked") && $(dinnercheck).is(":checked")){
        app.products = app.products.map(({name, breakfast_price, lunch_price, dinner_price}) =>
            ({
                name,
                breakfast_price,
                lunch_price,
                dinner_price,
                "all": ((+dinner_price)).toFixed(2)
            }));
    }
    else if($(breakcheck).is(":checked") && !$(lunchcheck).is(":checked") && !$(dinnercheck).is(":checked")){
        app.products = app.products.map(({name, breakfast_price, lunch_price, dinner_price}) =>
            ({
                name,
                breakfast_price,
                lunch_price,
                dinner_price,
                "all": ((+breakfast_price)).toFixed(2)
            }));
    }
    else if(!$(breakcheck).is(":checked") && $(lunchcheck).is(":checked") && !$(dinnercheck).is(":checked")){
        app.products = app.products.map(({name, breakfast_price, lunch_price, dinner_price}) =>
            ({
                name,
                breakfast_price,
                lunch_price,
                dinner_price,
                "all": ((+lunch_price)).toFixed(2)
            }));
    }
    else{
        app.products = app.products.map(({name, breakfast_price, lunch_price, dinner_price}) =>
            ({
                name,
                breakfast_price,
                lunch_price,
                dinner_price,
                "all": (0).toFixed(2)
            }));
    }

});

forgive me for the mistakes in my code as i am quite new to json handeling and javascript.

Answer 1

Remember that (un)checking the checkboxes you will need to update the totals within the current section. You will need to find out which section an item is clicked. After that, you can simply get all checked items within that section and update the totals.

I would suggest to specify a data attribute to each of the checkboxes and slightly modify the checkUpdate method.

checkUpdate: function() {
  "use strict";
  var context = $(this).closest("li"),
    productPrice = 0;

  $("input.form-check-input:checked", context).each(function() {
    productPrice += parseFloat($(this).data("price"));
  });

  var subtotalCtr = $(".product-total-price", context);
  subtotalCtr.html(productPrice.to_$());

  app.updateTotals();
}

And of course a slight modification of the template

                <script id="shopping-cart--list-item-template" type="text/template">
              <li class="_grid shopping-cart--list-item">

                            <div class="_column product-info">
                                <h4 class="product-name">{{=name}}</h4>
                                <div class="row">
                                    <div class="form-check  col-md-3" style="margin-left: 20px">
                                        <label class="form-check-label">
                                            <input data-price="{{=breakfast_price}}" class="form-check-input" id="breakfast_check" type="checkbox" value="" checked>
                                                Breakfast
                                            <span class="form-check-sign">
                                                <span class="check"></span>
                                            </span>
                                        </label>
                                    </div>
                                    <div class="price product-single-price col-md-3" id="breakfast">₹{{=breakfast_price}}</div>
                                </div>
                                <div class="row">
                                    <div class="form-check col-md-3" style="margin-left: 20px">
                                        <label class="form-check-label">
                                            <input data-price="{{=lunch_price}}" class="form-check-input" id="lunch_check" type="checkbox" value="" checked>
                                                Lunch
                                            <span class="form-check-sign">
                                                <span class="check"></span>
                                            </span>
                                        </label>
                                    </div>
                                    <div class="price product-single-price col-md-3">₹{{=lunch_price}}</div>
                                </div>
                                <div class="row">
                                    <div class="form-check col-md-3" style="margin-left: 20px" >
                                        <label class="form-check-label">
                                            <input data-price="{{=dinner_price}}" class="form-check-input" id="dinner_check" type="checkbox" value="" checked>
                                                Dinner
                                                <span class="form-check-sign">
                                                    <span class="check"></span>
                                                </span>
                                        </label>
                                    </div>
                                    <div class="price product-single-price col-md-3">₹{{=dinner_price}}</div>
                                </div>
                            </div>

                            <div class="_column product-modifiers" data-breakfast-price="{{=breakfast_price}}" data-lunch-price="{{=lunch_price}}" data-dinner-price="{{=dinner_price}}">
                                <div class="_grid">
                                    <button class="_btn _column product-subtract">&minus;</button>
                                    <div class="_column product-qty">1</div>
                                    <button class="_btn _column product-plus">&plus;</button>
                                </div>
                                <div class="price product-total-price">₹{{=all}}</div>
                                <button class="_btn entypo-trash product-remove" style="margin-top: 0">Remove</button>

                            </div>
                        </li>
                    </script>

You can see a working example here: https://jsfiddle.net/uo809g3y/1/