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

Question

我在 1 个表单中有近 100 个 HTML 下拉菜单，在提交之前，我想计算所有下拉框中所选值的总和。目前，它无法正常工作。

jQuery:

  <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>

HTML 输出

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

表单启动:

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

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

任何帮助将不胜感激。

Answer 1

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>