test
HTML
<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 name="selected_fees">
fee 1
</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 name="selected_fees">
fee 2
</td>
<td name="amount">
12
</td>
<td>
fee 3
</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>
<div class="form-group">
<label for="fs">Fees selected</label>
<input type="text" class="form-control" id="fs" name="fs" required disabled>
</div>
JavaScript
$(function() {
$(".check_amount").click(function(event) {
var total = 0;
var name = "";
//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
name += $(this).closest('tr').find('td[name=selected_fees]').text().trim() + " "; //get td value
});
alert(name)
$('#tp').val(total);
$('#fs').val(name);
});
});