'How can I add two each row sum depending on a button click?

So, I'm trying to add two to each row sum depending on whether or not the button is clicked.

HTML:

<table>
<tr>
<td>
<input type="checkbox" class="prof" name="prof" value="0">
<input class="mod" name="mod" type="text" value='2'>
<input class="savings" name="savings" type="text">
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="prof" name="prof" value="0">
<input class="mod" name="mod" type="text" value='4'>
<input class="savings" name="savings" type="text">
</td>
</tr>
</table>

jquery:

//when document is ready, have numbers appear in each '.savings'
$(document).ready(function() {
//on button click, change the number depending on if checked or not
  $('input[type="checkbox"]').click(function() {
    if ($('input[type="checkbox"]').prop("checked") == true) {
      $('tr').each(function() {
        var sum = 2
        $(this).find('.mod').each(function() {
          var mod = $(this).val();
          if (!isNaN(mod) && mod.length !== 0) {
            sum += parseFloat(mod);
          }
        });
        $('.savings', this).val(sum);
      })
    } else {
      $('tr').each(function() {
        var sum = 0
        $(this).find('.mod').each(function() {
          var mod = $(this).val();
          if (!isNaN(mod) && mod.length !== 0) {
            sum += parseFloat(mod);
          }
        });
        $('.savings', this).val(sum);
      })
    }
  })
});

My problem is that the button click adds two to every row and not the row it's sitting in. Any help would be appreciated.

JSfiddle: https://jsfiddle.net/sheepishlamb/3p9gary8/

javascripthtmljquerybuttonsum


Solution 1:[1]

You can try this :

$('input[type="checkbox"]').click(function() {
  var mod = $(this).next('.mod').val();
  var sum = ($(this).is(":checked")) ? 2 : 0;
  if (!isNaN(mod) && mod.length !== 0) {
    sum += parseFloat(mod);
  }
  $(this).siblings('.savings').val(sum);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="checkbox" class="prof" name="prof" value="0">
      <input class="mod" name="mod" type="text" value='2'>
      <input class="savings" name="savings" type="text">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="prof" name="prof" value="0">
      <input class="mod" name="mod" type="text" value='4'>
      <input class="savings" name="savings" type="text">
    </td>
  </tr>
</table>

Solution 2:[2]

So the main issues I can see are that you're applying your function to all checkboxes.

this in your click function will refer to the checkbox you've clicked.

You just need to look at the mod and savings elements relative to the checkbox, so to search for the elements you need the parent element of the checkbox.

$(document).ready(function() {
//on button click, change the number depending on if checked or not
  $('input[type="checkbox"]').click(function() {
    if ($(this).prop("checked") == true) {
        var sum = 2
        $(this.parentElement).find('.mod').each(function() {
          var mod = $(this).val();
          if (!isNaN(mod) && mod.length !== 0) {
            sum += parseFloat(mod);
          }
        });
        $('.savings', this.parentElement).val(sum);
    } else {
        var sum = 0
        $(this.parentElement).find('.mod').each(function() {
          var mod = $(this).val();
          if (!isNaN(mod) && mod.length !== 0) {
            sum += parseFloat(mod);
          }
        });
        $('.savings', this.parentElement).val(sum);
    }
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="checkbox" class="prof" name="prof" value="0">
<input class="mod" name="mod" type="text" value='2'>
<input class="savings" name="savings" type="text">
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="prof" name="prof" value="0">
<input class="mod" name="mod" type="text" value='4'>
<input class="savings" name="savings" type="text">
</td>
</tr>
</table>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Pranav Rustagi
Solution 2

Related Questions