jQuery:多个输入框的总和

5
我希望制作一个表单,其中包含7个输入字段,我在这些字段中输入数字,最后一个输入字段将所有插入的数字相加到一个结果中。 我尝试编辑其他人的脚本,但由于某种原因它没有显示结果。
HTML代码如下:
<form class="form-horizontal" id="whereEntry" method='post' action=''>
   <fieldset>
    <input type="text" class="income_count span1 register_input" id="income" name="income" placeholder="% of income"> <br>
    <input type="text" class="income_count span1 register_input" id="income_2" name="income_2" placeholder="% of income"> <br>
<input type="text" class="income_count span1 register_input" id="income_3" name="income_3" placeholder="% of income"> <br>
<input type="text" class="income_count span1 register_input" id="income_4" name="income_4" placeholder="% of income"> <br>
    <input type="text" class="income_count span1 register_input" id="income_5" name="income_5" placeholder="% of income"> <br>
        <input type="text" class="income_count span1 register_input" id="income_6" name="income_6" placeholder="% of income"> <br><br><br>

   <input type="text" class="span2 register_input" id="income_sum" name="income_sum" placeholder="% of income"> <br>
       </fieldset>
       </form>

目前我的脚本看起来像这样:

and my script so far looks like this:

var $form = $('#whereEntry'),
$summands = $form.find('.income_count'),
$sumDisplay = $('#income_sum');

$form.delegate('.income_count', 'change', function ()
{
var sum = 0;
$summands.each(function ()
{
    var value = Number($(this).val());
    if (!isNaN(value)) sum += value;
});

$sumDisplay.text(sum);
});

这是它的jsfiddle链接: http://jsfiddle.net/bT4nm/1/

你能帮我吗?问题出在我的html类还是脚本里面的什么地方?我对jQuery很菜,需要尽快解决..更新我的js fiddle会很好。


一旦您正确计算出数字总和,您可能会遇到难以以正确格式(千位分隔符、小数位、货币符号等)显示总数的问题。请参考此答案以获取帮助:https://dev59.com/P3E85IYBdhLWcg3wMAfc#28378652 - cssyphus
2个回答

5

$sumDisplay.val(sum);

替代

   $sumDisplay.text(sum);

WORKING DEMO


5
请使用以下内容:
var $form = $('#whereEntry'),
$summands = $form.find('.income_count'),
$sumDisplay = $('#income_sum');

$form.delegate('.income_count', 'change', function ()
{
var sum = 0;
$summands.each(function ()
{
    var value = Number($(this).val());
    if (!isNaN(value)) sum += value;
});

$sumDisplay.val(sum);
});

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接