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

Posted 2023-05-09

【中文标题】使用表格中的复选框检查后如何获取值？

【英文标题】：How to get the value after being checked using checkbox in table?

【发布时间】：2021-07-20 14:21:13

【问题描述】：

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

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

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

【问题讨论】：

由于这不依赖于 PHP，请创建一个带有minimal, reproducible example 问题的 sn-p。

jsfiddle.net/katalepsy/0m8wpo6t/12/#&togetherjs=tGQAPKdJce 目前这是我现在得到的

【参考方案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>

【讨论】：

很好，它就像我想要的那样工作！谢谢您的帮助！最后，请问您为什么不使用 id 来调用多个元素而不是使用类？我只是想开导自己的困惑。

您好，id 应该是唯一的，您不能将 same id 用于多个元素。但是，同一个类可以被多个元素使用，所以在这里你需要触发所有的复选框，以便使用类作为选择器。另外，查看this的帖子将帮助您了解更多。

嗨，这个 val() 应该是 text() 。另外，它们是字符串（字母）所以删除 parseInt

查看更新后的code。另外，type="text" 用于名称输入。

我很高兴你对我的耐心非常感谢你。如果我能获得您的 Discord 或您使用的任何平台，我会很高兴^^