jQuery, count the sum of text box values

Question

So here's the problem. I have two check boxes, and two text boxes, and one final text box at the bottom. What I'm trying to do is this: When check box 1 is checked, the text box right next to it gets a value of 8. When check box 2 is checked, the text box right next to it gets a value of 7. Then finally the final text box shows the sum of the text boxes, which in this case should be 15.

I've tried this: just give the text boxes values with if statements. Then give a class "textboxes" for both text boxes, and just count the sum of them. I'm able to get the values with if statements, but can't get the final sum of those.

$(function(){
  $('#checkbox1').click(function(){
    if (this.checked) {
       $('#textbox1').val(7);
    }
  });
  $('#checkbox2').click(function(){
    if (this.checked) {
       $('#textbox2').val(8);
    }
  });

var total = 0;
    $('.textboxes').each(function() {
       total += Number($(this).val());
    });
    $('#totalSum').val(total);

});

Travis J · Accepted Answer · 2014-09-18 18:41:54Z

2

The total only calculates once, on page load, and it calculates 0. What you want to do is update the total each time the input is changed. You can do this by making the total a function, and then calling that from the click callback

$(function(){
  $('#checkbox1').click(function(){
    if (this.checked) {
       $('#textbox1').val(7);
       updateTotal();
    }
  });
  $('#checkbox2').click(function(){
    if (this.checked) {
       $('#textbox2').val(8);
       updateTotal();
    }
  });

  function updateTotal(){
  	var total = 0;
  	$('.textboxes').each(function() {
    	total += Number($(this).val());
  	});
  	$('#totalSum').val(total);
  }
  updateTotal();
});

.textboxes{
	width: 30px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
  <input class="textboxes" id="textbox1" /><input id="checkbox1" type="checkbox"/><br />
  <input class="textboxes" id="textbox2" /><input id="checkbox2" type="checkbox" /><br />
</div>
<div><input id="totalSum"></div>

answered Sep 18, 2014 at 18:41

Travis J

82.6k43 gold badges213 silver badges280 bronze badges

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

4 Comments

Travis J Over a year ago

@Alex Art- That would be beyond the scope of the question really. It also doesn't use ajax, unicorns, or rainbows. The main point was that the recalculation had to happen.

Klisee Over a year ago

Yeah I already had the else statements, but didn't put them here because that wasn't my problem. I still gave you a point though for taking the time to help.

Travis J Over a year ago

@Klisee - I figured you only needed some guidance on making the recalculation and that the first time it only happened once (yielding 0). At this point I am sure that you can make improvements to the design which fit your needs :) The question had a very good demonstration of the issue you were having and limiting the scope is very important to asking well received questions.

Klisee Over a year ago

Yeah all I needed to know was the calculation. I had struggled with this for the past 2 hours, so once again, thanks for the quick answer.

Alex Art. · Accepted Answer · 2014-09-18 19:10:48Z

EDIT: Cleaner and more extendable code (works for any dynamic number of checkboxes):

Fiddle

$(function(){
    $(':checkbox').click(function(){
        var textbox = $(this).next('input[type="text"]');
    if (this.checked) {      
       $(textbox).val($(this).data("number"));
    }
    else{
        $(textbox).val("");
    }      
    calculateTotal();
  });
});

function calculateTotal()
{
    var total = 0;    
    $("input:checked").each(function(){
        var val = $(this).next('input[type="text"]').val();
        total += Number(val);
    });

    $('#totalSum').val(total);
}

data-number attributes are added to the checkboxes:

<div>
<input type="checkbox" id="checkbox1" data-number="7" />
<input type="text" id="textbox1" />
</div>
<div>
<input type="checkbox" id="checkbox2" data-number="8" />
<input type="text" id="textbox2" />
</div>
<div>
<input type="checkbox" id="checkbox3" data-number="9" />
<input type="text" id="textbox3" />
</div>
<div>
<input type="checkbox" id="checkbox4" data-number="10" />
<input type="text" id="textbox4" />
</div>
<input type="text" id="totalSum" />

Collectives™ on Stack Overflow

jQuery, count the sum of text box values

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related