javascript - 如何对多个数字文本框值求和？

Question

我有多个数字文本框，如下图所示，都是货币格式文本框。如何对类名称中文本框的值求和Charges并显示总sub-total-Of-Charges文本框并class=sub从sub-total-Of-Charges文本框值中减去文本框中的任何值。

我使用了以下 jQuery 代码，它可以工作，但有两个问题。

不保留货币格式

的值仅在我net-invoiced-amount更新文本框类中的文本框值时.sub-total-Of-Charges更新。.Chargesnet-invoiced-amount.sub-total-Of-Charges

$(document).ready(function () {
 $(document).on("change", ".charges", function () {
     var calculated_total_sum = 0;

     $(".charges").each(function () {
         var get_textbox_value = $(this).val();
         if ($.isNumeric(get_textbox_value)) {
             calculated_total_sum += parseFloat(get_textbox_value);
         }
     });
     $(".sub-total-Of-Charges").val(calculated_total_sum);
 });

$(document).on("change", ".sub", function () {

     var netInvoicedAmount = $(".sub-total-Of-Charges").val();

     $(".sub").each(function () {
         var get_textbox_value = $(this).val();
         if ($.isNumeric(get_textbox_value)) {
             netInvoicedAmount -= parseFloat(get_textbox_value);
         }
     });
     $(".net-invoiced-amount").val(netInvoicedAmount).trigger("change");
 });

});

score 1 · Accepted Answer

您需要获取需要使用设置更新值的文本框的引用，data("kendoNumericTextBox")然后使用.value("newwvalue")此设置新值将根据您之前设置的格式更新新值。

此外，用于$(this).attr("aria-valuenow")获取没有任何货币的文本框的原始值，并将选择器更改$(".k-formatted-value.charges")为仅从特定文本框获取输入值。目前，当您检查生成的 html 时，它有 2 个具有相同类的输入框，这就是总和不是的原因在职的。

演示代码：

$("#TotalDirectLaborCharges, #TotalIndirectLaborCharges, #TotalContractCharges, #TotalTravelCharges, #TotalAdjustments, #TotalAdjustments, #CostsAlreadyPaid, #Other, #NetInvoicedAmount ,#SubtotalOfCharges").kendoNumericTextBox({
  decimals: 2,
  format: "c"
});

//add both selector
$(document).on("change", ".charges,.sub", function() {

  var calculated_total_sum = 0;
  $(".k-formatted-value.charges").each(function() {
    //get original value without currecny
    var get_textbox_value = $(this).attr("aria-valuenow");
    if ($.isNumeric(get_textbox_value)) {
      calculated_total_sum += parseFloat(get_textbox_value);
    }
  });
  //get kendo textbox
  var numerictextbox = $("#SubtotalOfCharges").data("kendoNumericTextBox");
  //set value
  numerictextbox.value(calculated_total_sum);


});
//add both selector
$(document).on("change", ".sub ,.charges", function() {
  //get value from inputbox
  var netInvoicedAmount = $("#SubtotalOfCharges").data("kendoNumericTextBox").value();
  $(".k-formatted-value.sub").each(function() {
    //get original value
    var get_textbox_value = $(this).attr("aria-valuenow");
    if ($.isNumeric(get_textbox_value)) {
      netInvoicedAmount -= parseFloat(get_textbox_value);
    }
  });
  //set value in invoice amt
  var numerictextbox = $("#NetInvoicedAmount").data("kendoNumericTextBox");
  numerictextbox.value(netInvoicedAmount);

});

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.common.min.css">

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.rtl.min.css">

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.default.min.css">

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.mobile.all.min.css">



<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2020.3.1021/js/angular.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2020.3.1021/js/jszip.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2020.3.1021/js/kendo.all.min.js"></script>

<div class="quarter m-l-lg m-y text-right">

  <label class="m-r-lg required" asp-for="TotalDirectLaborCharges">Total Direct Labor Charge<br /></label>
  <input id="TotalDirectLaborCharges" class="charges" /><br />
  <label class="m-r-lg required" asp-for="TotalIndirectLaborCharges">TotalIndirectLaborCharges<br /></label><br />

  <input id="TotalIndirectLaborCharges" class="charges" /><br />
  <label class="m-r-lg required" asp-for="TotalContractCharges">TotalContractCharges</label><br />

  <input id="TotalContractCharges" class="charges" /><br />

  <label class="m-r-lg required" asp-for="TotalTravelCharges">TotalTravelCharges</label><br />

  <input id="TotalTravelCharges" class="charges" /><br />
  <label class="m-r-lg required" asp-for="TotalAdjustments">TotalAdjustments</label><br />

  <input id="TotalAdjustments" class="sub" /><br />

  <label class="m-r-lg required" asp-for="CostsAlreadyPaid">CostsAlreadyPaid</label><br />

  <input id="CostsAlreadyPaid" class="sub" /><br />
  <label class="m-r-lg required" asp-for="Other">Other</label><br />

  <input id="Other" class="sub" /><br />
  <label class="m-r-lg required" asp-for="SubtotalOfCharges">SubtotalOfCharges</label><br />

  <input id="SubtotalOfCharges" readonly class="sub-total-Of-Charges" />

  <br />

  <label class="m-r-lg required" asp-for="Other">NetInvoicedAmount</label><br />

  <input id="NetInvoicedAmount" readonly class="netInvoicedAmount" />

</div>

score 1 · Accepted Answer

当您在项目中使用 jQuery 时，我也在使用该库编写此答案。

$(document).ready(function() {
  let $references = {
    subtotal: $('#SubtotalOfCharges').first(),
    net: $('#NetInvoicedAmount').first(),
    fields: {
      subtract: $('input.sub'),
      charge: $('input.charges')
    }
  }
  
  function calculateSum($elements) {
    return Array.from($elements).reduce((previousValue, element) => {
      val = $(element).val();
      
      if(val)
        previousValue += parseFloat($(element).val());
      
      return previousValue;
    }, 0)
  }
  
  $(document).on('change', 'input', function() {
    let sum = {
      subtract: calculateSum($references.fields.subtract),
      charge: calculateSum($references.fields.charge),
    }
    
    $references.subtotal.val(sum.charge);
    $references.net.val(sum.charge - sum.subtract);
  });
})

input,
label {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label>Total Direct Labor Charge</label>
<input id="TotalDirectLaborCharges" class="charges">

<label>TotalIndirectLaborCharges</label>
<input id="TotalIndirectLaborCharges" class="charges">

<label>TotalContractCharges</label>
<input id="TotalContractCharges" class="charges">

<label>TotalTravelCharges</label>
<input id="TotalTravelCharges" class="charges">

<label>TotalAdjustments</label>
<input id="TotalAdjustments" class="sub">

<label>CostsAlreadyPaid</label>
<input id="CostsAlreadyPaid" class="sub">

<label>Other</label>
<input id="Other" class="sub">

<label>SubtotalOfCharges</label>
<input id="SubtotalOfCharges" readonly class="sub-total-Of-Charges">

<label>NetInvoicedAmount</label>
<input id="NetInvoicedAmount" readonly class="net-invoiced-amount">

它是如何工作的？

为了计算小计/净额，您可以将事件处理程序绑定到两个输入组并运行一次计算，而不是在更改（或）时手动触发change事件。.sub.charges
我曾经$references稍微整理一下代码，areduce function用于计算字段组的总和。
Array.from用于从 jQuery 对象创建本机 Javascript 数组。

有关更多信息，请在此处Array.reduce访问其文档，有关更多信息，请访问此处。Array.from

最后，一个可行的解决方案是使用输入前缀。每个 UI 框架通常都有一个内置的，否则，您可以在此处查看 Bootstrap 的输入组（特别是，.input-group-prepend）。

javascript - 如何对多个数字文本框值求和？

2 回答 2

Related

Reference