问题是，当我在复选框中打勾时，我希望输入如小计的第二个跨度的值，例如，当我在第一行表上打勾时，有两个值，例如第一行中的500和第二行中的200复选框，应该在ID为小计的输入中显示500的值，但是当我也勾选第二个复选框时，应该在500中添加该值，总值应在小计的ID中显示，例如700，这也是滴答滴答问题是发生。
我有一个表格，其中给出了一些字段，如服务，金额，税款和操作，代码如下：
<!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>
您的主要问题是因为subtotal是包含所选价格的字符串，因此将其转换为jQuery选择器$(subtotal)将无济于事。
您也仅在选中复选框时更新小计。取消选中某项时，逻辑不会减去该值。
要解决这两个问题，可以在更改任何复选框时计算所有行的值，如下所示：
$(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">本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句