首頁猿問如何對多個數(shù)字文本框值求和？

如何對多個數(shù)字文本框值求和？

JavaScript

紅顏莎娜 2023-06-29 22:38:41

我有多個數(shù)字文本框，如下代碼片段所示，全部都是貨幣格式文本框。如何對類名稱中文本框的值求和Charges并顯示總文本框，并從文本框值sub-total-Of-Charges中減去文本框中的任何值。class=subsub-total-Of-Charges我使用了以下 jQuery 代碼，它可以工作，但有兩個問題。不保留貨幣格式net-invoiced-amount僅當(dāng)我更新文本框類 .sub 中的文本框值時，的值才會更新。更新的值相同，但.sub-total-Of-Charges我.Charges需要重新計算或更新該值net-invoiced-amount，或者.sub-total-Of-Charges每當(dāng) .sub 或 .charges 文本框的值發(fā)生更改時。$(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"); });});

查看完整描述

2 回答

侃侃無極

TA貢獻2051條經(jīng)驗獲得超10個贊

您需要獲取需要使用設(shè)置更新值的文本框的引用data("kendoNumericTextBox")，然后使用它設(shè)置新值.value("newwvalue")，這將根據(jù)您之前設(shè)置的格式更新新值。

另外，用于$(this).attr("aria-valuenow")獲取沒有任何貨幣的文本框的原始值，并將選擇器更改為$(".k-formatted-value.charges")僅從特定文本框獲取輸入值。當(dāng)前，當(dāng)您檢查生成的 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);

});

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

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

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

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

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

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

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

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

<br />

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

</div>

反對回復(fù) 2023-06-29

慕娘9325324

TA貢獻1783條經(jīng)驗獲得超4個贊

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

}

<label>Total Direct Labor Charge</label>

<label>TotalIndirectLaborCharges</label>

<label>TotalContractCharges</label>

<label>TotalTravelCharges</label>

<label>TotalAdjustments</label>

<label>CostsAlreadyPaid</label>

<label>Other</label>

<label>SubtotalOfCharges</label>

<label>NetInvoicedAmount</label>

它是如何工作的？

為了計算小計/凈額，您可以將事件處理程序綁定到兩個輸入組并運行一次計算，而不是在( 或) 更改change時手動觸發(fā)事件。.sub.charges
我曾經(jīng)$references稍微整理過代碼，并reduce function使用 a 來計算字段組的總和。
Array.from用于從 jQuery 對象創(chuàng)建本機 Javascript 數(shù)組。