Javascript jQuery中的表单字段值总和

我在做一个项目，我似乎无法让它发挥作用。基本上，我试图将“收入”字段中的值转换为“总收入”字段底部的总和

我已经做了一个很好的解释，希望能让你更容易理解-

HTML标记：

<div class="form-group">
            <label class="control-label col-md-2">April</label>
            <div class="col-md-3">
              <div class="input-group">
                <span class="input-group-addon">$</span><input class="form-control" name="AprilInput" placeholder="eg. 35,328" type="text" id="AprilInput"></input>
              </div>
            </div>

            <label class="control-label col-md-1">Revenue</label>
            <div class="col-md-3">
              <div class="input-group">
                <span class="input-group-addon">$</span><input class="form-control" name="Output" id="AprilOutput" placeholder="0" type="text" readonly></input>
              </div>
            </div>
      </div>

      <div class="form-group">
            <label class="control-label col-md-2">May</label>
            <div class="col-md-3">
              <div class="input-group">
                <span class="input-group-addon">$</span><input class="form-control" name="MayInput" placeholder="eg. 35,328" type="text" id="MayInput"></input>
              </div>
            </div>

            <label class="control-label col-md-1">Revenue</label>
            <div class="col-md-3">
              <div class="input-group">
                <span class="input-group-addon">$</span><input class="form-control1" name="Output" id="MayOutput" placeholder="0" type="text" readonly></input>
              </div>
            </div>
      </div>

      <div class="form-group">
            <label class="control-label col-md-2">June</label>
            <div class="col-md-3">
              <div class="input-group">
                <span class="input-group-addon">$</span><input class="form-control" name="JuneInput" placeholder="eg. 35,328" type="text" id="JuneInput"></input>
              </div>
            </div>

            <label class="control-label col-md-1">Revenue</label>
            <div class="col-md-3">
              <div class="input-group">
                <span class="input-group-addon">$</span><input class="form-control1" name="Output" id="JuneOutput" placeholder="0" type="text" readonly></input>
              </div>
            </div>
      </div>

<br/>

<span class="form-horizontal">
<div class="row">
  <div class="col-lg-12">
    <div class="widget-container fluid-height clearfix">
      <div class="heading">
        <i class="icon-reorder"></i>Annual Total
      </div>
      <div class="widget-content padded">

      <div class="form-group">
            <label class="control-label col-md-6">Total Revenue</label>
            <div class="col-md-3">
              <div class="input-group">
                <span class="input-group-addon">$</span><input class="form-control" name="TotalOutput" id="TotalOutput" placeholder="0" type="text" readonly></input>
              </div>
            </div>
      </div>

四月
$
收入
$
也许
$
收入
$
六月
$
收入
$


年度总数
总收入
$

您正在通过

输出

标记进行循环。将其更改为

。表单控制

：

$(".form-control").each(function() { /* ... */ }

而不是.html，而是.val（）：

我编辑了你的代码：

更改：

$(document).ready(function(){

        //iterate through each textboxes and add keyup
        //handler to trigger sum event


            $("input[name='Output']").keyup(function(){

                calculateSum();
            });

    });

    function calculateSum() {

        var sum = 0;
        //iterate through each textboxes and add the values
        $("input[name='Output']").each(function() {

            //add only if the value is number
            if(!isNaN(this.value) && this.value.length!=0) {
                sum += parseFloat(this.value);
            }

        });
        //.toFixed() method to roundoff the final sum
        $("#TotalOutput").val(sum.toFixed(0));
    }

$（'Output'）

应输入

$（“[name='Output']”）

$（“#TotalOutput”）.html（sum.toFixed（0））

应该是

$（“#TotalOutput”）.val（sum.toFixed（0））
我在


您可以稍微整理一下代码：

   function SetupInput(obj,output,sumfunction){
        $(obj).keyup(function(){
            var n = parseInt($(this).val());
            var n = this.value.replace(/,/g, "");

            if(n <= 155000) {
                $(output).val(numberWithCommas((n/100*70).toFixed(0)));
            }
            else if(n <= 175000) {
                $(output).val(numberWithCommas((n/100*75).toFixed(0)));
            }
            else {
                $(output).val(numberWithCommas((n/100*80).toFixed(0)));
            }
            sumfunction();
        });
    }
    SetupInput($('#AprilInput')[0],$('#AprilOutput')[0],calculateSum);
    SetupInput($('#MayInput')[0],$('#MayOutput')[0],calculateSum);
    SetupInput($('#JuneInput')[0],$('#JuneOutput')[0],calculateSum);
    function numberWithCommas(x) {
        return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
    }



function calculateSum() {
    var sum = 0;
    //iterate through each textboxes and add the values
    $(".form-control1").each(function() {
        //add only if the value is number
        var value=this.value.replace(',','');//remove ','

        if(!isNaN(value) && value.length!=0) {
            sum += parseFloat(value);
            console.log(this.id,sum);
        }
    });

    //.toFixed() method to roundoff the final sum
    $("#TotalOutput").val(sum.toFixed(0));
}

功能设置输入（obj、输出、SUM功能）{
$（obj）.keyup（函数（）{
var n=parseInt（$（this.val（））；
var n=此.value.replace（/，/g，“”）；
如果（一个观察-你没有像现在这样关闭输入标记，它们是自动关闭的标记，所以你也不能显示你的JS代码。我已经创建了一个JSFiddle@putvande谢谢大家！现在解决了，我对所有这一切都很陌生，所以仍然错过了很多基本的东西不幸的是…再次感谢。出于某种原因，当e是1000，它不计算（或者加逗号-我想他们会通过？）。因为你用“，”将数字转换为a。在+=之前谢谢@Cracker0dks！但是它没有处理逗号（当值达到1000时）太好了，我真的需要他们在那里。我想他们也会进行到总数。因为点正在使用正常…更新替换逗号功能：谢谢heaps@liu3hao。非常感谢！
$(document).keyup(function() {
    var sumRevenue = 0;
    $.each($(".revenue"), function() {
       var val = $.trim($(this).val());
       if(val != "")
           sumRevenue += parseFloat(val); 
    });
    $("#sumrevenue").val(sumRevenue);
});

   function SetupInput(obj,output,sumfunction){
        $(obj).keyup(function(){
            var n = parseInt($(this).val());
            var n = this.value.replace(/,/g, "");

            if(n <= 155000) {
                $(output).val(numberWithCommas((n/100*70).toFixed(0)));
            }
            else if(n <= 175000) {
                $(output).val(numberWithCommas((n/100*75).toFixed(0)));
            }
            else {
                $(output).val(numberWithCommas((n/100*80).toFixed(0)));
            }
            sumfunction();
        });
    }
    SetupInput($('#AprilInput')[0],$('#AprilOutput')[0],calculateSum);
    SetupInput($('#MayInput')[0],$('#MayOutput')[0],calculateSum);
    SetupInput($('#JuneInput')[0],$('#JuneOutput')[0],calculateSum);
    function numberWithCommas(x) {
        return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
    }



function calculateSum() {
    var sum = 0;
    //iterate through each textboxes and add the values
    $(".form-control1").each(function() {
        //add only if the value is number
        var value=this.value.replace(',','');//remove ','

        if(!isNaN(value) && value.length!=0) {
            sum += parseFloat(value);
            console.log(this.id,sum);
        }
    });

    //.toFixed() method to roundoff the final sum
    $("#TotalOutput").val(sum.toFixed(0));
}

   function calculateTotalREv(){ 
      var totalRev = 0;
  $("input[name='Output']").each(function() {
    totalRev = eval(total+parseFloat($(this).val()));
  });
      alert(totalRev);
    }
    calculateTotalREv();