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

Question

我有多个数字文本框，如下代码片段所示，全部都是货币格式文本框。如何对类名称中文本框的值求和Charges并显示总文本框，并从文本框值sub-total-Of-Charges中减去文本框中的任何值。class=subsub-total-Of-Charges我使用了以下 jQuery 代码，它可以工作，但有两个问题。不保留货币格式net-invoiced-amount仅当我更新文本框类 .sub 中的文本框值时， 的值才会更新。更新的值相同，但.sub-total-Of-Charges我.Charges需要重新计算或更新该值net-invoiced-amount，或者.sub-total-Of-Charges每当 .sub 或 .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("更改", ".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"); });});

Answer 1

您需要获取需要使用设置更新值的文本框的引用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>

Answer 2

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

它是如何工作的？

1. 为了计算小计/净额，您可以将事件处理程序绑定到两个输入组并运行一次计算，而不是在( 或) 更改change时手动触发事件。.sub.charges

2. 我曾经$references稍微整理过代码，并reduce function使用 a 来计算字段组的总和。

3. Array.from用于从 jQuery 对象创建本机 Javascript 数组。