Question

我有一系列小计框，输出数量的值乘以单位价格，我需要将每个的值加在一起，然后输出到表格中的下方。

我已经使用以前建议的方法进行了此操作，但无法使其发挥作用。有什么想法吗？

HTML：

<button id="addItem" href="#">Add Item</button> <!-- Trigger button -->

<td><input name="subtotal" class="sinput txt"></td> <!-- Subtotals to add -->

<span id="totalplus" class="totalsub"></span> <!-- Output total -->

JS：

$('#invoiceItemForm button#addItem').click(function(e) {

    e.preventDefault();

    var sum = 0;
    $('.invoicemade .sinput').each(function() {
        sum += +$(this).val();
    });
    $('.invoicemade span#totalplus').val(sum);

});

Answer 1

请尝试以下代码段：

$('button#addItem').click(function(e) {

    e.preventDefault();

    var sum = 0;
    $('.sinput.txt').each(function() {
    
        sum += parseInt($(this).val()); //Change the calculation acc. to your needs
    });
    $('span#totalplus').html(sum);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="addItem" href="#">Add Item</button> <!-- Trigger button -->

<td><input name="subtotal" class="sinput txt"><input name="subtotal" class="sinput txt"><input name="subtotal" class="sinput txt"></td> <!-- Subtotals to add -->

<span id="totalplus" class="totalsub"></span>

删除#invoiceItemForm，因为您没有提供该代码。

您应该在.html()上使用.val()代替span，因为它不是表单控件

注意在程序中使用此代码时添加#invoiceItemForm。

Answer 2

使用parseInt进行计算以避免string concat。其他代码错误正在评论中。

$('button#addItem').click(function(e) {
    e.preventDefault();
    var sum = 0;
    $('.sinput').each(function() {
        sum += parseInt($(this).val()); // Remove + 
    });
    alert(sum);
    $('#totalplus').text(sum); // Remove quote 

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table></table>
<tr>
<td><input name="subtotal" class="sinput txt"></td> 
<td><input name="subtotal" class="sinput txt"></td> 
</tr>
<span id="totalplus" class="totalsub"></span> 
<button id="addItem" href="#">Add Item</button>

输出与具有相同类别的输入的总和

2 个答案: