当我们勾选复选框时，如何添加表格字段值并将其显示在输入中？答案

【问题标题】：How to add table field values and show it in an input when we tick on the checkbox?当我们勾选复选框时，如何添加表格字段值并将其显示在输入中？
【发布时间】：2018-07-16 10:14:52
【问题描述】：

问题是当我勾选复选框时，我希望在小计之类的输入中输入第二个跨度的值，例如，第一行有两个值，例如 500 在第二行，第二行有 200，当我勾选时第一行表格复选框的值应该是 500 应该显示在带有 id subtotal 的输入中，但是当我在第二个复选框上也打勾时，值应该添加到 500 并且总值应该显示在小计 id 中，如 700，也是勾选untick 问题正在发生。

我有一个表格，其中给出了一些字段，如服务、金额、税金和行动，代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>table</title>
</head>
<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <table cellspacing="0" rules="all" border="1" id="table1" style="border-collapse:collapse;">
    <tbody>
      <tr>
        <th scope="col">Service </th>
        <th scope="col">Amount</th>
        <th scope="col">tax</th>
        <th scope="col">Action</th>
      </tr>
      <tr>
        <td>
          <span>Subscription Charges</span>
        </td>
        <td>
          <span>500.00</span>
        </td>
        <td>
          <span>90.00</span>
        </td>
        <td>
          <input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00" />
        </td>
      </tr>
      <tr>
        <td>
          <span>registration fees</span>
        </td>
        <td>
          <span>200.00</span>
        </td>
        <td>
          <span>80.00</span>
        </td>
        <td>
          <input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00" />
        </td>
      </tr>
    </tbody>
  </table>
  <input type="text" name="subtotal" id="subtotal">
  <input type="text" name="grandtotal" id="grandtotal">
  <script>
    $(document).ready(function() {
      $(document).on("change", ".tot_amount", function() {
        var total = 0.00;
        if (this.checked) {
          var subtotal = $(this).closest("tr").find('td').eq(1).find('span').text();
          total += parseFloat($(subtotal).val());
          $('#subtotal').val(total);
        }
      });
    });
  </script>
</body>
</html>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您的主要问题是因为subtotal 是一个包含所选价格的字符串，因此将其转换为$(subtotal) 中的jQuery 选择器不会做任何有用的事情。

您也只能在选中复选框时更新小计。当项目未选中时，您的逻辑不会减去该值。

要解决这两个问题，您可以在更改任何复选框时计算所有行的值，如下所示：

$(document).ready(function() {
  $(document).on("change", ".tot_amount", function() {
    var total = 0;
    $('.tot_amount:checked').each(function() {
      total += parseFloat($(this).closest('tr').find('td:eq(1) span').text());
    });
    $('#subtotal').val(total);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="0" rules="all" border="1" id="table1" style="border-collapse:collapse;">
  <tbody>
    <tr>
      <th scope="col">Service </th>
      <th scope="col">Amount</th>
      <th scope="col">tax</th>
      <th scope="col">Action</th>
    </tr>
    <tr>
      <td>
        <span>Subscription Charges</span>
      </td>
      <td>
        <span>500.00</span>
      </td>
      <td>
        <span>90.00</span>
      </td>
      <td>
        <input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00" />
      </td>
    </tr>
    <tr>
      <td>
        <span>registration fees</span>
      </td>
      <td>
        <span>200.00</span>
      </td>
      <td>
        <span>80.00</span>
      </td>
      <td>
        <input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00" />
      </td>
    </tr>
  </tbody>
</table>

<input type="text" name="subtotal" id="subtotal">
<input type="text" name="grandtotal" id="grandtotal">

【讨论】：

我只想在输入中添加金额值，而不是复选框值，我的意思是只有第二个跨度值，例如 500 和 200
我知道，但那是我不想要的
什么？您的问题和评论说您想从表中获取“金额”值，这段代码就是这样做的，现在您说您不想要那个？
不，因为我的英语不好你不懂，实际上我只想要输入中的表行 td 第二个值，例如，我想在输入中只添加 500 和 200 值，不含税
@JayArya 你检查了 Rory mcCrossan 的答案，我的意思是你运行了代码 sn-p 吗？它给出了你所问的答案......

【解决方案2】：

我希望这能如您所愿。

var total =0.00;
$(document).ready(function(){
    $(document).on("change",".tot_amount",function(){
        var subtotal = $(this).closest("tr").find('td').eq(1).find('span').text();
        if (this.checked){ 
            total +=parseFloat(subtotal);
        } else {
            total -=parseFloat(subtotal);
        }
        $('#subtotal').val(total);
    });
});

快乐编码:)

【讨论】：

虽然这在理论上可以回答这个问题，it would be preferable 在此处包含答案的基本部分，并提供链接以供参考。
@Rory McCrossan 仅供参考，添加的链接是小提琴而不是任何文档或文档