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

Question

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

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

不保留货币格式

net-invoiced-amount 的值仅在我更新文本框 class 中的文本框值时更新。子相同的 .sub-total-Of-Charges 值在 [=18= 上更新] 已更新，但每当 .sub 或 .charges 文本框的值发生更改时，我都需要重新计算或更新值 net-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);
 });

$(文档).on("更改", ".sub", 函数 () {

     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");
 });

});

Answer 1

由于您在项目中使用了 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">

它是如何工作的？

无需在 .sub（或 .charges）更改时手动触发 change 事件，要计算 subtotal/net 数量，您可以绑定事件处理程序对两个输入组和运行计算一次。
我用$references整理了一下代码，reduce function用来计算字段组的总和
Array.from 用于从 jQuery 对象创建原生 Javascript 数组。

有关 Array.reduce 的更多信息，请访问其文档 here, and for more information on Array.from visit here。

最后，一个可行的解决方案是使用输入前缀。每个UI框架通常有一个built-in，否则，你可以看看Bootstrap的输入组here（特别是.input-group-prepend）。

Answer 2

您需要获取需要使用 data("kendoNumericTextBox") 设置更新值的文本框的引用，然后使用 .value("newwvalue") 设置新值这将根据您设置的格式更新新值早些时候.

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

演示代码 :

$("#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>

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

How can I sum multiple Numeric textbox value?

javascript

jquery

kendo-ui

kendo-grid

kendonumerictextbox