javascript - 将一个文本输入字段中的值添加到预先填充的输入字段

Question

我有一个输入字段，由表单中复选框的值填充。该部分工作得很好，因此标记为“total”的输入字段将显示 checkbox1 + checkbox2 等的总和，具体取决于选中的框。我的客户添加了一个额外的障碍，即有一个文本输入字段，用户可以在其中手动输入任何额外费用，并且这也会添加到总计中。

这是当前表单的样子:

<div class="checkbox">
   <label>
      <input type="checkbox" name="checkbox" id="outside" class="sum" value="1" data-toggle="checkbox"/> 
      Outside Wash
   </label>
</div><br/>

<div class="checkbox">
   <label>
      <input type="checkbox" name="checkbox" id="aclean" class="sum" value="1" data-toggle="checkbox"/>
       A - Clean: Wash Vacuum, Windows, Wheels/Tires, Wax
   </label>
</div><br/>

<div class="checkbox">
   <label>
      <input type="checkbox" name="checkbox" id="bclean" class="sum" value="1" data-toggle="checkbox">
       B - Clean: Same as A above <em>PLUS:</em> Shampoo Interior, Clean/Dress Interior Panels, Remove Bugs/Tar.
   </label>
</div><br/>

<div class="checkbox">
   <label>
      <input type="checkbox" name="checkbox" id="cclean" class="sum" value="1" data-toggle="checkbox">
       C - Clean: Same as B above <em>PLUS:</em> Compound Polish Exterior, Clean/Dress Moldings as Needed.
   </label>
</div>

这是 2 个文本输入字段。 total 字段当前获取这些复选框的总和。用户可以在 inputSpecial 字段中手动输入任何额外费用。

<label for="inputSpecial">Special Price</label><br/>
<input type="special" class="form-controlv sum" id="inputSpecial" placeholder="Enter Price for Any Additional Services">


<label for="total"><strong>Total Price</strong></label><br/>
<input type="text" class="form-control" id="total">

最后，这是在表单后面运行并添加值的 JavaScript。我想在此代码的基础上进行构建，而不是为了其他东西而废弃它。

$(document).ready(function() {
function updateSum() {
    $("#total").val($(".sum:checked").length);
}
// run the update on every checkbox change and on startup
$("input.sum").change(updateSum);
    updateSum();
})

Answer 1

添加值时要使用 parseFloat，否则您将添加连接一串数字。

检查值是否为 NaN 还将处理任何无效值并使用 0 而不是 NaN。

添加更改事件以处理更改为#inputSpecial。还将长度更改为值以获得有效的值之和。

https://jsfiddle.net/SeanWessell/gwco6uj3/

$(document).ready(function() {
  function updateSum() {
    var total = 0;
    var $special = $('#inputSpecial');
    $(".sum:checked").each(function() {
      var val = isNaN(parseFloat(this.value)) ? 0 : parseFloat(this.value);
      total += val;
    })
    var addl = isNaN(parseFloat($special.val())) ? 0 : parseFloat($special.val());
    $("#total").val(Math.round((total + addl) * 100) / 100);
  }
  // run the update on every checkbox change and on startup
  $("input.sum,#inputSpecial").change(updateSum);
  updateSum();
});

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN