如何根据单击按钮将每行总和添加两个？

Question

因此，我试图根据是否单击按钮为每行总和添加两个。

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>

查询：

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

我的问题是单击按钮会在每一行而不是它所在的行中添加两个。任何帮助将不胜感激。

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

Answer 1

所以我可以看到的主要问题是您将函数应用于所有复选框。

this在您的点击功能中将引用您点击的复选框。

您只需要查看与复选框相关的mod ans savings元素，因此搜索您需要复选框的父元素的元素。

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

Answer 2

你可以试试这个：

 $('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>