勾選復選框時如何更改 JSON 鍵的值？

Question

**注意 - 當復選框被選中或未選中時，我希望在我的對象中更新“全部”。 此外，當頁面加載時，我希望“all”的值是這三個復選框前面的值的總和**

注意 - 復選框前面的值不是復選框的標簽，它們是不同的 div

我制作了一個購物車類型的頁面，並通過我的 js 文件中的 json 數據在其中添加了示例產品。 這將計算所有項目的小計和總計。 現在我在每個項目中添加了三個復選框，這些復選框是預先選中的。 所以，我想要實現的是，當我取消選中或重新選中復選框時，它們的值會從小計中減去，然后從總計中減去。 到目前為止我嘗試過的是在下面給出的 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 處理和 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/