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

Question

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

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

1. 不保留货币格式

2. 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({&nbsp; decimals: 2,&nbsp; format: "c"});//add both selector$(document).on("change", ".charges,.sub", function() {&nbsp; var calculated_total_sum = 0;&nbsp; $(".k-formatted-value.charges").each(function() {&nbsp; &nbsp; //get original value without currecny&nbsp; &nbsp; var get_textbox_value = $(this).attr("aria-valuenow");&nbsp; &nbsp; if ($.isNumeric(get_textbox_value)) {&nbsp; &nbsp; &nbsp; calculated_total_sum += parseFloat(get_textbox_value);&nbsp; &nbsp; }&nbsp; });&nbsp; //get kendo textbox&nbsp; var numerictextbox = $("#SubtotalOfCharges").data("kendoNumericTextBox");&nbsp; //set value&nbsp; numerictextbox.value(calculated_total_sum);});//add both selector$(document).on("change", ".sub ,.charges", function() {&nbsp; //get value from inputbox&nbsp; var netInvoicedAmount = $("#SubtotalOfCharges").data("kendoNumericTextBox").value();&nbsp; $(".k-formatted-value.sub").each(function() {&nbsp; &nbsp; //get original value&nbsp; &nbsp; var get_textbox_value = $(this).attr("aria-valuenow");&nbsp; &nbsp; if ($.isNumeric(get_textbox_value)) {&nbsp; &nbsp; &nbsp; netInvoicedAmount -= parseFloat(get_textbox_value);&nbsp; &nbsp; }&nbsp; });&nbsp; //set value in invoice amt&nbsp; var numerictextbox = $("#NetInvoicedAmount").data("kendoNumericTextBox");&nbsp; 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">&nbsp; <label class="m-r-lg required" asp-for="TotalDirectLaborCharges">Total Direct Labor Charge<br /></label>&nbsp; <input id="TotalDirectLaborCharges" class="charges" /><br />&nbsp; <label class="m-r-lg required" asp-for="TotalIndirectLaborCharges">TotalIndirectLaborCharges<br /></label><br />&nbsp; <input id="TotalIndirectLaborCharges" class="charges" /><br />&nbsp; <label class="m-r-lg required" asp-for="TotalContractCharges">TotalContractCharges</label><br />&nbsp; <input id="TotalContractCharges" class="charges" /><br />&nbsp; <label class="m-r-lg required" asp-for="TotalTravelCharges">TotalTravelCharges</label><br />&nbsp; <input id="TotalTravelCharges" class="charges" /><br />&nbsp; <label class="m-r-lg required" asp-for="TotalAdjustments">TotalAdjustments</label><br />&nbsp; <input id="TotalAdjustments" class="sub" /><br />&nbsp; <label class="m-r-lg required" asp-for="CostsAlreadyPaid">CostsAlreadyPaid</label><br />&nbsp; <input id="CostsAlreadyPaid" class="sub" /><br />&nbsp; <label class="m-r-lg required" asp-for="Other">Other</label><br />&nbsp; <input id="Other" class="sub" /><br />&nbsp; <label class="m-r-lg required" asp-for="SubtotalOfCharges">SubtotalOfCharges</label><br />&nbsp; <input id="SubtotalOfCharges" readonly class="sub-total-Of-Charges" />&nbsp; <br />&nbsp; <label class="m-r-lg required" asp-for="Other">NetInvoicedAmount</label><br />&nbsp; <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">它是如何工作的？为了计算小计/净额，您可以将事件处理程序绑定到两个输入组并运行一次计算，而不是在( 或) 更改change时手动触发事件。.sub.charges我曾经$references稍微整理过代码，并reduce function使用 a 来计算字段组的总和。Array.from用于从 jQuery 对象创建本机 Javascript 数组。