Use checkbox in jQuery to toggle 2 numeric values

Question

How would I alter the below code to toggle between a non zero value and a zero value when checkbox is checked and unchecked? See

$(document).ready(function() {
  $('input[type="checkbox"]').click(function() {
    var inputValue = $(this).attr("value");
    $("." + inputValue).toggle();
  });
});

.box {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label><input type="checkbox" name="colorCheckbox" value="n1"> num 1</label>
  <label><input type="checkbox" name="colorCheckbox" value="n2"> num 2</label>
  <label><input type="checkbox" name="colorCheckbox" value="n3"> num 3</label>
</div>
<div class="n1 box">55000</div>
<div class="n2 box">200</div>
<div class="n3 box">300</div>

https://jsfiddle.net/hcanning/53ye8wf7/

what do you want to achieve, don't understand question really — flakerimi, Aug 11 '21 at 20:59
it's for toggling costs. User checks on a product checkbox and the price is revealed e.g. $10. When unchecked I want the value to be 0 so I can sum the checked and unchecked product values and not get a NaN. The values are in divs eg `
10
` — , Aug 11 '21 at 22:58
You cannot add value to check box because is boolean, which mean is true or false. I suggest you make hidden input then add value to that. — flakerimi, Aug 11 '21 at 23:03
My ultimate goal is to get this idea working: https://jsfiddle.net/hcanning2012/20jrgq6e/18/ ...users reveal price and they get totaled. I'm summing up the values in the price divs into the Total div — , Aug 11 '21 at 23:20

flakerimi · Accepted Answer · 2021-08-11T23:53:21.227

0

You can do it like this, to get sum for each checkbox, tweaked as you need

$(document).ready(function() {
var sum = 0;
  $('input[type="checkbox"]').change(function() {
    var inputValue = $(this).attr("value");

   if(this.checked) {
       sum = parseInt(sum) + parseInt($("." + inputValue).text());
   }else {
       sum = parseInt(sum) - parseInt($("." + inputValue).text());
    }
    $("#sum").text(sum);

    $("." + inputValue).toggle();
  });
});

.box {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   


<table width="100%">
<tr> 
<td> <label><input type="checkbox" name="colorCheckbox" value="n1"> Show Price</label></td><td><div class="n1 box">55000</div></td>
</tr><tr> 
<td> <label><input type="checkbox" name="colorCheckbox" value="n2"> Show Price</label></td><td><div class="n2 box">200</div></td>
</tr><tr> 
<td> <label><input type="checkbox" name="colorCheckbox" value="n3"> Show Price</label></td><td><div class="n3 box">300</div></td>
</tr>

<tr> 
<td > Total: </td><td><div id="sum">0</div></td>
</tr>

edited Aug 11 '21 at 23:53

answered Aug 11 '21 at 23:26

flakerimi

2,580
3
29
49

Thanks for that. When the checkbox is checked its intended to set the value 55000 (in the example) `
55000
` if that checkbox isn't checked that div is empty `
` so when it gets summed I get a NaN. I'm trying to set that empty div to 0 instead when checkbox is unchecked so I can total properly. The idea is that the 55000 is set using something like `$('.n1').html("55000");` in jQuery when that checkbox is checked. This is my end goal: https://jsfiddle.net/hcanning2012/20jrgq6e/22/ – Aug 11 '21 at 23:36
1

You wont get NaN because it will substract from var `sum` so no need to set to 0, Just use div with id="sum" where you want to display sum, also I am parsing as Integers those values, so no NaN will be there – flakerimi Aug 11 '21 at 23:45
1

check edited as table, to reflect jsfiddle – flakerimi Aug 11 '21 at 23:53
1

you may add as much rows as you want as long as you follow your pattern – flakerimi Aug 11 '21 at 23:54
Ok. Thanks very much. – Aug 12 '21 at 01:47
If you get a chance could you take a look at https://stackoverflow.com/questions/68759950/how-to-calculate-totals-in-jquery-with-dropdowns . I'm trying to incorporate dropdowns into the form and am close. Thanks! – Aug 12 '21 at 15:08
Thats different question, first accept this, then open new one if you are having difficulties implementing that – flakerimi Aug 13 '21 at 22:14

Use checkbox in jQuery to toggle 2 numeric values

1 Answers1