Javascript 选中复选框将价格添加到主价格

我正在try 为现有的订餐系统构建购物车功能.

在那里，用户可以查看产品价格

<div class="product__price m-t-5">
  <span class="product__price product__price--large">$@Html.DisplayFor(model => model.ProductPrice)</span>
</div>

一节.

如果所选产品是可定制的，我会在带有复选框的视图中显示额外的项目.

所以我想知道的是，如果顾客 Select 了任何额外的商品，额外的商品价格应该加到主价上.

此外，如果客户未勾选，则应从主要金额中减go .

想知道如何使用Java脚本实现这一点吗？

这是HTML码.

  <div class="col-md-7">
   <div class="product-details-box m-b-60">
     <h4 class="font--regular m-b-20">@Html.DisplayFor(model => model.ProductName)</h4>
     <div class="product__price m-t-5">
       <span class="product__price product__price--large">$@Html.DisplayFor(model => model.ProductPrice)</span>
     </div>
     <div class="product-var p-tb-30">
       <div class="product-quantity product-var__item d-flex align-items-center">
         <span class="product-var__text">Quantity: </span>
         <form class="quantity-scale m-l-20">
           <div class="value-button" id="decrease" onclick="decreaseValue()">-</div>
           <input type="number" id="number" name="number" value="1" />
           <div class="value-button" id="increase" onclick="increaseValue()">+</div>
         </form>
       </div>
       <div>
         <h4 class="font--regular m-b-20">Add Some Extra</h4> 
         @if (Model.CustomizableFoods.Count!=0) 
         { 
         foreach (var item in Model.CustomizableFoods)
         { 
         <div class="row">
           <ul class="list">
             <li class="list__item">
               <label class="label--checkbox">
                 <input type="checkbox" class="checkbox"> &nbsp; &nbsp; &nbsp; @item.ExtraItem - @item.Extra_Item_Price </label>
             </li>
           </ul>
         </div>
            } 
        }
       </div>
       <div class="product-var__item">
         <input class="btn btn--long btn--radius-tiny btn--green btn--green-hover-black btn--uppercase btn--weight m-r-20" type="submit" value="Add to cart" />
         <a href="wishlist.html" class="btn btn--round btn--round-size-small btn--green btn--green-hover-black">
           <i class="fas fa-heart"></i>
         </a>
       </div>
       <div class="product-var__item">
         <span class="product-var__text">Guaranteed safe checkout </span>
       </div>
       <div class="product-var__item d-flex align-items-center">
         <span class="product-var__text">Share: </span>
         <ul class="product-social m-l-20">
           <li>
             <a href="#">
               <i class="fab fa-facebook-f"></i>
             </a>
           </li>
           <li>
             <a href="#">
               <i class="fab fa-twitter"></i>
             </a>
           </li>
           <li>
             <a href="#">
               <i class="fab fa-pinterest-p"></i>
             </a>
           </li>
         </ul>
       </div>
     </div>
   </div>
 </div>

这是一个视图的样本，

这是我做的，

在视图中

 @if (Model.CustomizableFoods.Count!=0) 
 { 
    foreach (var item in Model.CustomizableFoods) 
     {  
     <div class="row">
        <ul class="list">
            <li class="list__item">
                <label class="label--checkbox">
                    <input type="checkbox" class="checkbox" onclick="thisChecked()" value="@item.Extra_Item_Price"> &nbsp; &nbsp; &nbsp; @item.ExtraItem - @item.Extra_Item_Price </label>
            </li>
        </ul>
      </div> 
    } 
 }

在 playbook 中

< script >
  function thisChecked() {

    var sList = "";
    $('input[type=checkbox]').each(function () {
      sList += "(" + $(this).val() + "-" + (this.checked ? "checked" : "not checked") + ")";
    });

    alert(sList);

  } <
  /script>

因此，alert 显示

(100.00-checked)(450.00-not checked)

那么，有没有办法只将选定的值传递给一个变量，然后判断或不判断另一个变量呢？