javascript - 勾选复选框时如何更改 JSON 键的值？

Question

**注意 - 我希望在选中或取消选中复选框时更新我的​​对象中的“所有”。此外，当页面加载时，我希望“全部”的值是这三个复选框前面的值的总和**

注意 - 复选框前面的值不是复选框的标签，它们是不同的 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/