How to get the value after being checked using checkbox in table?

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>

This is my table inside my modal, I want todo after the checkbox being checked it will automatically calculate in my input named "tp".

table rows a cell named "amount" which will be the value of checkbox

`

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

`

Currently this is the only code that I have in my 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);
    });

Lastly I want to achieve dynamically when you uncheck the checkbox at the same time the total value will also deducted.

Any tips for this? your help is highly appreciated!!

Answer 1

You cannot use same ids for mutliple elements so instead use class i.e : check_amount. Then , whenever user click on checkbox simply loop through checked checkboxes and get name="amount" values using .closest('tr').find('td[name=amount]') and finally add result inside your input.

Demo Code:

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