如何用jQuery将下拉数量选择改为复选框并计算小计？

修改要点 #

• 将每行的数量选择下拉框替换为复选框，勾选即表示选择该商品（对应原逻辑的数量1），取消勾选则不计入（对应原逻辑的数量0）
• 把事件监听从下拉框的change事件改为复选框的change事件
• 调整计算逻辑：判断当前行的复选框是否选中，选中则将商品价格计入小计和总计，否则小计为0
• 总计以纯文本数字形式显示（仅保留数值，去掉多余符号）

完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="myTable" class="table table-bordered">
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Select</th>
            <th><span class="subtotal-header">Subtotal</span></th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="2"></td>
            <td><span>TOTAL</span></td>
            <td class="total">0</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Adult</td>
            <td><span class="price">8.25</span></td>
            <td><input type="checkbox" class="product-select" name="select"></td>
            <td><span class="subtotal">0</span></td>
        </tr>
        <tr>
            <td>Junior</td>
            <td><span class="price">6.75</span></td>
            <td><input type="checkbox" class="product-select" name="select"></td>
            <td><span class="subtotal">0</span></td>
        </tr>
        <tr>
            <td>Senior</td>
            <td><span class="price">6.75</span></td>
            <td><input type="checkbox" class="product-select" name="select"></td>
            <td><span class="subtotal">0</span></td>
        </tr>
        <tr>
            <td>Student</td>
            <td><span class="price">6.75</span></td>
            <td><input type="checkbox" class="product-select" name="select"></td>
            <td><span class="subtotal">0</span></td>
        </tr>
    </tbody>
</table>
<script>
$(document).ready(function () {
    update_amounts();
    $('.product-select').change(update_amounts);
});

function update_amounts() {
    var sum = 0.0;
    $('#myTable > tbody > tr').each(function () {
        var isSelected = $(this).find('.product-select').is(':checked');
        var price = parseFloat($(this).find('.price').text());
        var amount = isSelected ? price : 0;
        sum += amount;
        $(this).find('.subtotal').text(amount.toFixed(2));
    });

    // 总计以纯文本数值形式显示
    $('.total').text(sum.toFixed(2));
}
</script>

额外说明 #

• 移除了原代码中重复的id属性（price、subtotal），避免DOM元素ID冲突
• 调整表头的"Quantity"为"Select"，更符合复选框的功能语义
• 使用toFixed(2)确保金额保留两位小数，避免浮点数计算精度问题

内容的提问来源于stack exchange，提问作者nightowl