Question

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

这就是目前的形式：

<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，否则您将添加连接一串数字。

检查值isNaN是否也会处理任何无效值并使用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

Answer 2

你可以这样做：

$("#total").val($(".sum:checked").length + parseFloat($("#inputSpecial").val());

但是，我不认为$(".sum:checked").length是进行初始求和的最佳方法。它假设所有四个复选框都具有相同的货币值（正好是1美元）。

所以你可能想要更像的东西：

var sumTotal = 0;
$(".sum:checked").each(function() {
    sumTotal += $(this).val();
});
sumTotal += parseFloat($("#inputSpecial").val()
$("#total").val(sumTotal);

从一个文本输入字段添加值到预先填充的输入字段

2 个答案: