PHP和jQuery使用復選框值更新文本框

Question

我想使用jQuery構建以下功能：

我有一個值列表：發票編號：110，金額：240.00發票編號：111，金額：399.00發票編號：112，金額：150.00

每行旁邊都有一個復選框，默認情況下設置為選中狀態。 在底部的右邊是一個文本框，其數據集總計為789.00。 當取消選中其中一個復選框並選中總和的發票金額時，我想更新文本框。

然后，將使用文本框集的值將表單提交給自己。

任何建議都歡迎，因為我是jQuery的新手。

Answer 1

剛剛在這里回答了類似的問題： jQuery-根據所選的復選框獲得總計

在發票的總跨度中添加一些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