How to add value if checkbox is checked in using JQuery?

Question

If the checkbox is checked then add value 3 in the original value and if unchecked, minus 3 and keep the original value.

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

 }

The model for this checkbox:

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

    }

Anyone please guide me how to do this.Thank you in advance.

You've tagged jQuery and ASP MVC, which exactly do you want to use to solve this? You should also post what attempt you've made to solve this yourself as we're not here to write your code for you. — Rory McCrossan
– Rory McCrossan, Commented Jan 22, 2018 at 11:06
@RoryMcCrossan, Yes I know. I do not have an idea so i posted it otherwise i would have done it. I can use either JQuery and MVC. You please suggest me. which one will be good. — Raj
– Raj, Commented Jan 22, 2018 at 11:10

Nitesh Kumar · Accepted Answer · 2018-01-22 12:15:09Z

1

Try the following approach

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

and add the below 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>

edited Jan 22, 2018 at 12:15

answered Jan 22, 2018 at 11:23

Nitesh Kumar

1,7744 gold badges19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Raj Over a year ago

I am not getting any value into original. var original =' ';

Nitesh Kumar Over a year ago

Please check how you assigned session value in Session["ProductCost"].

Raj Over a year ago

I got the value into original. But how to add this value into my '@Session["ProductCost"]';. please guide me.

Raj Over a year ago

I want to add 3 on each checked from checkbox into original value and subtract the same if unchecked from original value. please help me.

Nitesh Kumar Over a year ago

Check the updated answer. I have added a hidden field to hold the product cost. Initially it will get value from session then on each change of checkbox changed value will be updated in hidden field.

|

Ehsan Sajjad · Accepted Answer · 2018-01-22 11:57:04Z

1

You would need to add a common class to each checkbox and then write a change event in jquery for that and do the calculations like:

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

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

and in jquery code you would have to write:

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

or another approach can be to check the state of the checkboxes checked in the control and add and subtract the values accordingly in the ProductCost.

Note that this is just to give you idea how it can be done, the code might need some tweaks to get it perfectly working in your use case.

Hope it helps.

edited Jan 22, 2018 at 11:57

answered Jan 22, 2018 at 11:14

Ehsan Sajjad

62.6k16 gold badges112 silver badges171 bronze badges

2 Comments

Raj Over a year ago

I am not getting value in ` var $productCost = $("#ProductCost");`. please guide me.

Ehsan Sajjad Over a year ago

that is a hidden field in view : <input type="hidden" id="ProductCost" value="@Session["ProductCost"]"/>

Collectives™ on Stack Overflow

How to add value if checkbox is checked in using JQuery?

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related