Как изменить значение ключа JSON при установленном флажке?

Question

** ПРИМЕЧАНИЕ. Я хочу, чтобы «все» обновлялось в моих объектах, поскольку флажки установлены или не установлены.Кроме того, когда страница загружена, я хочу, чтобы значение «все» было суммой значений перед этими тремя флажками **

Примечание - значения перед флажками не являются метками флажков, которые ониразные дивы

Я сделал вид корзины покупок и добавил в нее образцы товаров через данные json в моем файле js.Это вычисляет промежуточный итог и общий итог всех пунктов.Теперь я добавил три флажка в каждый элемент, которые предварительно проверены.Итак, чего я хочу добиться, так это того, чтобы при снятии или повторной проверке флажков их значение вычиталось из промежуточной суммы, а затем из общей суммы.то, что я пробовал до сих пор, находится в js.fiddle, приведенном ниже.

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

также в настоящее время я пытаюсь этот код для обработки флажков.Но этот код изменяет промежуточные итоги всех элементов, и промежуточный итог сбрасывается при увеличении или уменьшении элементов.

    $(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)
            }));
    }

});

простите меня за ошибки в моем коде, так как я совершенно новичок в json handeling и javascript.

Answer 1

Помните, что (не) устанавливая флажки, вам нужно будет обновить итоги в текущем разделе.Вам нужно будет выяснить, в каком разделе щелкает элемент.После этого вы можете просто получить все отмеченные элементы в этом разделе и обновить итоги.

Я бы предложил указать атрибут данных для каждого из флажков и слегка изменить метод checkUpdate.

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

И, конечно, небольшая модификация шаблона

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

Рабочий пример можно посмотреть здесь: https://jsfiddle.net/uo809g3y/1/