问题是，当我勾选复选框时，我想要在小计之类的输入中输入第二个跨度的值，例如，第一行中有两个值，例如第一行中的 500 和第二行中的 200 ，当我勾选时第一行表复选框的值应为 500，应显示在带有 id 小计的输入中，但是当我也在第二个复选框上勾选时，该值应添加为 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是一个包含所选价格的字符串，因此将其转换为$(subtotal)中的jQuery选择器不会做任何有用的事情。
您也仅在选中复选框时更新小计。当取消选中某个项目时，您的逻辑不会减去该值。
要解决这两个问题，您可以在更改任何复选框时计算所有行的值，如下所示:
$(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">关于javascript - 当我们勾选复选框时，如何添加表字段值并在输入中显示它？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51359479/