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

您需要为每个复选框添加一个公共类，然后在jquery中为此编写一个change事件并执行以下计算：

@Html.CheckBoxFor(m => m.IsTrainers, new {@class = "Pedigrees"})

<input type="hidden" id="ProductCost" value="@Session["ProductCost"]"/>

在jquery代码中你必须写：

$(".Pedigrees").on("change",function(){
    var $productCost = $("#ProductCost");
    if(this.checked)
         $productCost.val( $productCost.val() + 3);
    else
         $productCost.val( $productCost.val() - 3);
   });

或其他方法可以检查控件中选中的复选框的状态，并在ProductCost中相应地添加和减去值。

请注意，这只是为了让您了解如何完成此操作，代码可能需要进行一些调整才能使其在您的用例中完美运行。

希望它有所帮助。

Answer 2

尝试以下方法

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

如果使用JQuery签入复选框，如何添加值？

2 个答案: