jquery一个多个输入字段的总和

时间:2013-06-06 07:45:57

标签: javascript jquery html input sum

我想制作一个表单,其中我有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>
到目前为止,我的脚本看起来像这样:

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非常苛刻,我需要作为ASAP解决方案..更新我的js小提琴会很棒

2 个答案:

答案 0 :(得分:5)

DO

$sumDisplay.val(sum);

而不是

   $sumDisplay.text(sum);

WORKING DEMO

答案 1 :(得分: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);
});