使用 Javascript 添加和减去输入值答案

【问题标题】：Add & Subtract Input Values with Javascript使用 Javascript 添加和减去输入值
【发布时间】：2012-12-12 18:30:50
【问题描述】：

我需要使用 Javascript 进行加减运算。我已经成功地将所有输入字段加在一起，但无法从第一个字段中减去该总数。我在下面插入了一个示例，而您一开始的余额为 1500，然后插入假设您有 3 个字段的业务成本。如前所述，我可以成功地将所有字段相加，但不能从余额中减去该总金额并将其显示在下方。

添加脚本

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){           
        $('input').each(function() {
            $(this).keyup(function(){  
                calculateTotal($(this));
            });
        });
    });

    function calculateTotal(src) {
        var sum = 0;
        var sumtable = src.closest('.sumtable');

        sumtable.find('input').each(function() {
            if(!isNaN(this.value) && this.value.length!=0) {
                sum += parseFloat(this.value);
            }
        });

        sumtable.find(".total").html(sum.toFixed(2));
    }   
</script>

HTML

<tr>
    <td>
    <font face='Verdana'>
    <input name='amount' size='6' value='1500.00'></font></td>
</tr>
<table border='0' cellpadding='0' cellspacing='0' width='16%' height='31'  class='sumtable'>
<tr>

    <font face='Verdana' style='font-size: 8pt; font-weight:700'>
    Amount:</font></td>
</tr>
<tr>
    <td>
    <font face='Verdana'>
    <input name='amount' size='6' ></font></td>
</tr>
<tr>
    <td>
    <font face='Verdana'>
    <input name='amount' size='6' ></font></td>
</tr>
<tr>
    <td>
    <font face='Verdana'>
    <input name='select3_amount' size='6' ></font></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>
<p align='right'><b>
<font face='Verdana' size='2'>Total Cost: $ 
</font></b> </td>
                <td><b><font face='Verdana' size='2'><span class='total'>0</span></font></b></td>
</tr>
<tr>
<td>
<p align='right'><b>
<font face='Verdana' size='2'>Total Remaining: $ 
</font></b> </td>
<td><b><font face='Verdana' size='2'><span class='balance'>0</span></font></b></td>
</tr>
</table>

我需要添加什么才能显示剩余余额？

【问题讨论】：

一点提示，你可以直接使用keyup，$('input').keyup(callback)你不需要each。
你想从哪里减去它？

标签： javascript jquery

【解决方案1】：

这是您的想法：http://jsfiddle.net/ZZX5D/ 吗？

var bal = $('input[name="amount"]').val();
bal = bal - sum
sumtable.find(".balance").html(bal.toFixed(2));

【讨论】：

没错！非常感谢！

【解决方案2】：

您并没有首先减去这些值。

$(function(){           
        $('input').each(function() {
            $(this).keyup(function(){  
                calculateTotal($(this));
            });
        });
    });

    function calculateTotal(src) {
        var sum = 0;
        var sumtable = src.closest('.sumtable');

        sumtable.find('input').each(function() {
            if(!isNaN(this.value) && this.value.length!=0) {
                sum += parseFloat(this.value);
            }
        });

        sumtable.find(".total").html(sum.toFixed(2));
        var balance = parseFloat($('.actual').val()) - sum
        sumtable.find(".balance").html(balance.toFixed(2));
    }  

   Added a `class actual` to the **Actual Amount**

Check fiddle

【讨论】：