jquery - 如果使用 JQuery 选中复选框，如何添加值？

Question

如果选中该复选框，则在原始值中添加值 3；如果未选中，则减去 3 并保留原始值。

 <label>Cost of this report: $ @Session["ProductCost"]</label>

@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{

                        <div>
                            @Html.CheckBoxFor(m => m.IsTrainers)
                            @Html.LabelFor(m => m.IsTrainers, "Include trainers in first Dam")
                        </div>
                        <div>
                            @Html.CheckBoxFor(m => m.IsSales)
                            @Html.LabelFor(m => m.IsSales, "Include Sales in first Dam")
                        </div>
                        <div>
                            @Html.CheckBoxFor(m => m.IsResearch)
                            @Html.LabelFor(m => m.IsResearch, "Research Style (all foals inc)")
                        </div>
                        <div>
                            @Html.CheckBoxFor(m => m.IsEngagement)
                            @Html.LabelFor(m => m.IsEngagement, "Include Race engagements in first Dam")
                        </div>

 }

此复选框的模型:

public class ClsHome
    {
        public bool IsTrainers { get; set; }
        public bool IsSales { get; set; }
        public bool IsResearch { get; set; }
        public bool IsEngagement { get; set; }
        public bool IsFamilyRunners { get; set; }

    }

任何人请指导我如何执行此操作。提前谢谢您。

Answer 1

尝试以下方法

<label>Cost of this report: $ <span id="spProductCost">@Session["ProductCost"]</span></label>
<input type="hidden" id="productCost" value="@Session["ProductCost"]" />

@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
  <div>
      @Html.CheckBoxFor(m => m.IsTrainers, new { onchange = "changeProductCost(this)" })
      @Html.LabelFor(m => m.IsTrainers, "Include trainers in first Dam")
  </div>
  <div>
      @Html.CheckBoxFor(m => m.IsSales, new { onchange = "changeProductCost(this)" })
      @Html.LabelFor(m => m.IsSales, "Include Sales in first Dam")
   </div>
   <div>
        @Html.CheckBoxFor(m => m.IsResearch, new { onchange = "changeProductCost(this)" })
        @Html.LabelFor(m => m.IsResearch, "Research Style (all foals inc)")
   </div>
   <div>
        @Html.CheckBoxFor(m => m.IsEngagement, new { onchange = "changeProductCost(this)" })
        @Html.LabelFor(m => m.IsEngagement, "Include Race engagements in first Dam")
   </div>
}

并添加以下 JavaScript

<script>
    var original = parseInt('@Session["ProductCost"]');
    function changeProductCost(chk){
        if ($(chk).prop("checked")) {
            original = original + 3;
        }
        else {
            original = original - 3;
        }
        $("#productCost").val(original);
        $("#spProductCost").text(original);
    }
</script>