总值计算错误

Question

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <style>
   .trans_gc
  {
     width: 220px;
height: 26px; 
  }
  </style>
<script>
    $.noConflict();
    $(document).ready(function(){
        $(".trans_gc").each(function() {

            $(this).keyup(function(){
                calculateSum();
            });
        });

    });

    function calculateSum() {

        var sum = 0;
        $(".trans_gc").each(function() {

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

        });
        $("#trans_gc_total").html(sum);
    }
</script>

    <div class="control-group">
      <div style="float: left;">

        <label class="control-label" >
          FRT
        </label>
        <div class="controls" id="trans_gc_frt">
          <input type="text" class="trans_gc " name="trans_gc_frt" id="trans_gc_frt" required="required" >
        </div>
      </div>
      <div>
        <div>

          <label class="control-label"  style="margin-right: 20px;">
            Hamali Ch.
          </label>
          <div class="controls" >
            <input type="text" class="trans_gc" name="trans_gc_hamali" id="trans_gc" required="required" >
          </div>
        </div>

      </div>

    </div>

    <div class="control-group">
      <div style="float: left;">

        <label class="control-label" >
          Sr.Ch
        </label>
        <div class="controls">
          <input type="text" class="trans_gc" name="trans_gc_sr" id="trans_gc" required="required" >
        </div>
      </div>
      <div>
        <div>

          <label class="control-label"  style="margin-right: 20px;">
            AOC
          </label>
          <div class="controls" >
            <input type="text" class="trans_gc" name="trans_gc_aoc" id="trans_gc" required="required" >
          </div>
        </div>

      </div>

    </div>

    <div class="control-group">
      <div style="float: left;">

        <label class="control-label" >
          Door Cln
        </label>
        <div class="controls">
          <input type="text" class="trans_gc" name="trans_gc_doorcln" id="trans_gc" required="required">
        </div>
      </div>
      <div>
        <div>

          <label class="control-label"  style="margin-right: 20px;">
            Door Del
          </label>
          <div class="controls" >
            <input type="text" class="trans_gc" name="trans_gc_doordel" id="trans_gc" required="required" >
          </div>
        </div>

      </div>

    </div>

    <div class="control-group">
      <div style="float: left;">

        <label class="control-label" >
          Risk Ch
        </label>
        <div class="controls">
          <input type="text" class="trans_gc" name="trans_gc_riskch" id="trans_gc" required="required">
        </div>
      </div>
      <div>
        <div>

          <label class="control-label"  style="margin-right: 20px;">
            Demmurage
          </label>
          <div class="controls" >
            <input type="text" class="trans_gc" name="trans_gc_dem" id="trans_gc" required="required">
          </div>
        </div>

      </div>

    </div>

    <div class="control-group">

      <label class="control-label" >
        Total Value
      </label>
      <div class="controls" >
        <input type="text" class="span3" id="trans_gc_total" required="required">

      </div>

      <!-- /controls -->

    </div>

总值不会显示在id trans_gc_total的输入字段中。 我想要所有输入字段的总数，它具有类trans_gc。  请任何人帮我解决这个问题。谢谢

Answer 1

这是工作脚本：

$(document).ready(function(){
    $(".trans_gc").keyup(calculateSum);
});

function calculateSum() {
    var sum = 0;
    $(".trans_gc").each(function() {
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseFloat(this.value);
        }
    });
    $("#trans_gc_total").val(sum);
}

查看jsFiddle

<强>建议

＆gt;您无需为事件绑定执行each

   $(".trans_gc").each(function() {
        $(this).keyup(function(){
            calculateSum();
        });
    });

这可以简化为：$(".trans_gc").keyup(calculateSum);

＆gt;要从jquery更改input字段值，您需要使用.val()代替.html()

更改，

$("#trans_gc_total").html(sum);

To，

$("#trans_gc_total").val(sum);