使用表格中的复选框检查后如何获取值？

Question

                        <tbody>
                            <?php 
                                $result = $connect->query("SELECT * FROM fees;") or die($connect->error());
                                while($row = $result->fetch_assoc()){ 
                            ?>
                            <tr>
                                <td>              
                                    <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="check_amount">
                                    <label class="custom-control-label" for="check_amount"><?php echo $row['id']; ?></label>
                                </div>
                                </td>
                                <td><?php echo $row['fee_name']; ?></td>
                                <td name="amount"><?php echo $row['amount']; ?></td>
                                <td><?php echo $row['type']; ?></td>
                            </tr>
                            <?php } ?>
                        </tbody>

这是我的模态表中的表格，我想在选中复选框后执行它会自动在名为“tp”的输入中计算。

表格行一个名为“金额”的单元格，这将是复选框的值

`

<div class="form-group">
  <label for="tp">Total payment</label>
  <input type="number" class="form-control" id="tp" name="tp" required disabled>
</div>

`

目前这是我的 js 中唯一的代码

        $(function(){ 
    $(".check_amount").click(function(event) {
        var total = 0;
        $(".check_amount:checked").each(function() {
        total += parseInt($(this).val());
        });
            $('#tp').val(total);
        });
    });
    $(document).ready(function () {
    var total2=0;
        $(".check_amount").each(function() {
    total2 += parseInt($(this).val());

    });
        $('#tp').val(total2);
    });

最后我想动态实现，当你取消勾选复选框的同时，总值也会被扣除。

对此有什么建议吗？非常感谢您的帮助！

Answer 1

您不能对多个元素使用相同的 id，因此请改用类，即：check_amount。然后，每当用户单击复选框时，只需遍历选中的复选框并使用 .closest('tr').find('td[name=amount]') 获取 name="amount" 值，最后将结果添加到您的输入中。

演示代码：

$(function() {
  $(".check_amount").click(function(event) {
    var total = 0;
    //loop through checked checkbox
    $("tbody input[type=checkbox]:checked").each(function() {
      total += parseInt($(this).closest('tr').find('td[name=amount]').text().trim()); //get td value
    });
    $('#tp').val(total);
  });
  // $(".check_amount").trigger('click')//on load
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>

    <tr>
      <td>
        <div class="custom-control custom-checkbox">
        <!--added class here-->
          <input type="checkbox" class="custom-control-input check_amount">
          <label class="custom-control-label" for="check_amount">1</label>
        </div>
      </td>
      <td>
        A1
      </td>
      <td name="amount">
        123
      </td>
      <td>
        A
      </td>
    </tr>
    <tr>
      <td>
        <div class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input check_amount">
          <label class="custom-control-label" for="check_amount">1</label>
        </div>
      </td>
      <td>
        A13
      </td>
      <td name="amount">
        12
      </td>
      <td>
        A3
      </td>
    </tr>

  </tbody>
</table>

<div class="form-group">
  <label for="tp">Total payment</label>
  <input type="number" class="form-control" id="tp" name="tp" required disabled>
</div>