jQuery calculate sum text fields if checked

Question

I am trying to calculate the sum of text fields from a row which are checked.

My code works fine, but the problem which I am facing is my only calculate the value of first row only and it to previous result every time instead of adding current text field value.

Here is working fiddle:

https://jsfiddle.net/infohassan/27L6wvgw/

Here is my JS code:

$(document).ready(function(){
  var $checkboxes = $('input[name^="txtChecked"]');
  $checkboxes.change(function() {
    $('input[name^="txtChecked"]').each(function() {
      var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
    calculateTotal();
    });
  });
});


function calculateTotal() {
  var total = 0;    
    $('input[name^="txtChecked"]:checked').each(function(){
      var val = parseFloat($('input[name^="txtCostAmount"]').val());
      total += val;
    });

  $('input[name="txtNetAmount"]').val(total);
}

do you want the sum to get updated if the user enters a new value in textbox ? — user5709173
– user5709173, Commented Jun 9, 2017 at 15:19
$('input[name^="txtCostAmount"]') returns 3 elements, but .val() (as per the documentation) will only return the value of the first one it finds. You need a way to associate the checkbox with the textbox (data- attributes might be a good way, or classes) then the code can isolate the correct related checkbox. — ADyson
– ADyson, Commented Jun 9, 2017 at 15:22
Yes but if I use data- attribute I can only calculate with the default value if user inputs in textbox it won't be added — Rtra
– Rtra, Commented Jun 9, 2017 at 15:27
no, you would use the data-attribute to link the two controls (checkbox and textbox) to each other, not to store the value. That way when you find a checkbox that's checked, you know which textbox to use to get the next value to add to the total by looking at the data- attribute, which would contain the id of the textbox. The answer below uses a similar principle except relying on the relative positions of the controls within the markup, which works but might break if you change the layout. — ADyson
– ADyson, Commented Jun 9, 2017 at 15:31

Louys Patrice Bessette · Accepted Answer · 2017-06-09 15:34:33Z

2

I cleaned your event handler...
And I made the .each() loop look for the text input which is on the same tr as the checkbox...

UpdatedFiddle

$(document).ready(function(){
  var $checkboxes = $('input[name^="txtChecked"]');
  $checkboxes.change(function() {
    //$('input[name^="txtChecked"]').each(function() {
      //var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
      calculateTotal();
    //});
  });
});


function calculateTotal() {
  var total = 0;    
  $('input[name^="txtChecked"]:checked').each(function(){
    var val = parseFloat($(this).parents("tr").find('input[name^="txtCostAmount"]').val());
    total += val;
  });

  $('input[name="txtNetAmount"]').val(total);
}

edited Jun 9, 2017 at 15:34

answered Jun 9, 2017 at 15:27

Louys Patrice Bessette

34k7 gold badges41 silver badges70 bronze badges

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

1 Comment

Rtra Over a year ago

wow great it works and resolve my biggest issue thanks really appreciated

Leandro Silva de Carvalho · Accepted Answer · 2017-06-09 15:47:44Z

$(document).ready(function(){
var $checkboxes = $('input[name^="txtChecked"]');
$checkboxes.change(function() {
      //  var countCheckedCheckboxes = $checkboxes.find(':checked').length;      
		calculateTotal();
  });
});


function calculateTotal() {
	var total = 0;    
    $('input[name^="txtChecked"]:checked').each(function(index, item){
    var parent = $(item).closest('tr');
		var val = parseFloat(parent.find('input[name^="txtCostAmount"]').val());
		total += val;
    });
    
	$('input[name="txtNetAmount"]').val(total);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th></th>
<th>Items</th>
<th>Cost</th>
</thead>

<tbody>
</tbody>
    <tr>
        <td><input name="txtChecked0" type="checkbox"></td>
        <td>Item Name 1</td>
        <td><input class="form-control input-sm" name="txtCostAmount0" value="3500" type="text"></td>
    </tr>
    
    <tr>
        <td><input name="txtChecked1" type="checkbox"></td>
        <td>Item Name 2</td>
        <td><input class="form-control input-sm" name="txtCostAmount1" value="4500" type="text"></td>
    </tr>
    
    <tr>
        <td><input name="txtChecked2" type="checkbox"></td>
        <td>Item Name 3</td>
        <td><input class="form-control input-sm" name="txtCostAmount2" value="4500" type="text"></td>
    </tr>
</table>

<p>NetAmount <input class="form-control" name="txtNetAmount" value="0.00" readonly="" type="text"></p>

Collectives™ on Stack Overflow

jQuery calculate sum text fields if checked

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related