Question

我有以下功能，我想使用jQuery构建一个表单：

我有一个值列表：发票编号：110，金额：240.00 发票编号：111，金额：399.00 发票编号：112，金额：150.00

每行旁边都有一个复选框，默认情况下设置为选中。在底部有一个文本框，总数为789.00，用于数据集。当其中一个复选框被取消选中时，我想更新文本框。使用选中复选框的发票金额总数进行选择。

然后，表格将以文本框集的值提交给自己。

欢迎任何建议，因为我是jQuery的菜鸟。

Answer 1

在这里回答类似的问题：jQuery - Getting total depending on which checkboxes are selected

将一些css课程放入发票总费用范围，例如：<span class="inv-total">120<span>。

然后将checkbox放入发票<div>：

中

<div>
    <input type="checkbox" value="##inv if here ##" />
</div>

然后jQuery当然：

$(document).ready(function() {
    $("input[type=checkbox]").click(function(event) {
        var total = 0;
        $("input:checked").each(function() {
            total += parseInt($(this).parent().find('.inv-total').text().substring(1));
        });

        if (total == 0) {
            $('#total').val('');
        }
        else {
            $('#total').val('$' + total);
        }
    });
});

我没有去测试它，但这是个主意。

实例：http://jsfiddle.net/dH9Eb/2/

Answer 2

$('.checkbox').change(function () {

        var text-box-val = $('.textbox').val();

    if ($(this).attr("checked")) {
        var new-val = $('.textbox').val() + $(this).attr('value');
        $('.textbox').val(new-val);
    }
    else {
        var new-val = $('.textbox').val() - $(this).attr('value');
        $('.textbox').val(new-val);
    }

});

Answer 3

这是一个带有html表的解决方案，当你点击一个复选框时更新金额：

<强> HTML：

<table id="invoices">
    <thead>
        <tr>
            <td>Invoice no</td>
            <td>Total</td>
            <td>include</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="invoiceId">112</td>
            <td class="amount">10</td>
            <td><input class="amountCheck" type="checkbox" checked="checked"/></td>
        </tr>
    </tbody>
</table>

<强> jQuery的：

$("#invoices .amountCheck").click(function() {
    var amount = parseInt($(this).closest("tr").find(".amount").text());
    if ($(this).is(":checked")) {
        total += amount;
    } else {
        total -= amount;
    }
    $("#invoiceTotal").val(total);
});

不要忘记检查服务器端的总数是否正确。

工作解决方案：jsFiddle

PHP和jQuery使用复选框值更新文本框

3 个答案: