所有 HTML 字段值的总和不起作用

Sum of all HTML field values not working

本文关键字：不起作用 HTML 字段 所有      更新时间：2023-09-26

我在 1 个表单中有近 100 个 HTML 下拉列表，在提交之前，我想计算所有下拉框中所选值的总和。目前，它不起作用。

j查询： 

  <script type="text/javascript">
  $(function () {
      var fields = $('#addFullAuditReport :input').change(calculate);
      function calculate() {
          var score = 0;
          fields.each(function () {
              score += +$(this).val();
          })
           $('#price').html(score.toFixed(2));
      }
  })
  </script>

HTML 表单字段示例：

  <div class="form-group">
    <div class="col-sm-1">1.4</div>
    <label for="1.4" class="col-sm-4 control-label"></label>
    <div class="col-sm-7">
      <select class="form-control" id="input" name="1_4">
        <option value="0">No</option>
        <option value="10">Yes</option>
      </select>
    </div>
  </div>

网页输出

Total : <u id="price"></u>

表单启动：

{!! Form::open(array('route' => array('addFullHandHygieneAudit'), 
'role'=>'form','id'=>'addFullHandHygieneAudit', 'class'=>'form-horizontal')) !!}

我的问题是没有任何内容添加到 HTML 输出中。jQuery可能是正确的，但在将其添加到字段中之前，我无法验证它。

任何帮助将不胜感激。

form中没有出现input元素; 将选择器更改为parentElement #input，例如; $(".form-group #input") .另外，用score.toFixed(2)代替price.toFixed(2) 

$(function() {
    var fields = $(".form-group #input").change(calculate);
    function calculate() {
      var score = 0;
      fields.each(function() {
        score += +$(this).val();
      })
      $('#price').html(score.toFixed(2));
    }
  })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
  <div class="col-sm-1">1.4</div>
  <label for="1.4" class="col-sm-4 control-label"></label>
  <div class="col-sm-7">
    <select class="form-control" id="input" name="1_4">
      <option value="0">No</option>
      <option value="10">Yes</option>
    </select>
  </div>
</div>
Total : <u id="price"></u>

看起来你有一个错别字，更改 

$('#price').html(price.toFixed(2));

自 

$('#price').html(score.toFixed(2));

我认为我们不能像这样使用更改事件处理程序。我的建议是这样的：

$(function ()
    {
    $('#addFullAuditReport :input').change(function()
        {
        var fields = $('#addFullAuditReport :input');
        var score = 0;
        fields.each(function() {
            score += $(this).val();
            });
        $('#price').html(score.toFixed(2));
        }
    });

你应该像这样尝试

$(function () {
      var fields = $('select').change(calculate);
      function calculate() {
          var score = 0;
          fields.each(function () {
              var val = $(this).val();
              score += isNaN(val) ? 0 : parseFloat(val);
          })
           $('#price').html(score.toFixed(2));
      }
      calculate();
  })
相关文章：