Отображение промежуточного итога с использованием JavaScript на ASP.NET CORE MVC

Question

Я хочу отобразить промежуточный итог столбца Сумма кредита, если установлен флажок Выбрать, не перезагружая страницу.В этом случае (см. Изображение ниже) промежуточная сумма должна распечатываться 38. Столбец Сумма кредита является редактируемым, поэтому общая сумма должна обновляться соответствующим образом на основе пользовательских данных.

Что у меня есть на мой взгляд

<table class="gridtable">
        <tr>
            <th>Select</th>
            <th>Submit Purchase Item Status Id</th>
            <th style="display:none;">Cart Order Id</th>
            <th>Customer Number</th>
            <th>Customer Name</th>
            <th>Serial Number</th>
            <th>Charged Amount</th>
            <th>Credit Amount</th>
            <th>State Tax</th>
            <th>Credit Tax</th>
            <th>Billing Start Date</th>
            <th>Billing End Date</th>
            <th>Invoice Number</th>
            <th>Invoice Date</th>
            <th style="display:none;">Cart Billable Item Id</th>
            <th>Quality</th>
        </tr>
        @for (int i = 0; i < Model.Count; i++)
        {
            <tr>
                <td>
                    @Html.EditorFor(model => model[i].Selected)
                </td>
                <td>
                    @Html.DisplayFor(model => model[i].SubmitPurchaseItemStatusId)
                    @Html.HiddenFor(model => model[i].SubmitPurchaseItemStatusId)
                </td>
                <td style="display:none;">
                    @Html.HiddenFor(model => model[i].CartOrderId)
                </td>
                <td>
                    @Html.DisplayFor(model => model[i].Custnmbr)
                    @Html.HiddenFor(model => model[i].Custnmbr)
                </td>
                <td>
                    @Html.DisplayFor(model => model[i].Custname)
                    @Html.HiddenFor(model => model[i].Custname)
                </td>
                <td>
                    @Html.DisplayFor(model => model[i].Serltnum)
                    @Html.HiddenFor(model => model[i].Serltnum)
                </td>
                <td>
                    @Html.DisplayFor(model => model[i].ChargedAmt)
                    @Html.HiddenFor(model => model[i].ChargedAmt)
                </td>
                <td>
                    @Html.EditorFor(model => model[i].CreditChargedAmt)
                    @Html.ValidationMessageFor(model => model[i].CreditChargedAmt, "", new { @class = "text-danger" })
                </td>
                <td>
                    @Html.DisplayFor(model => model[i].StateTax)
                    @Html.HiddenFor(model => model[i].StateTax)
                </td>
                <td>
                    @Html.EditorFor(model => model[i].CreditStateTax)
                    @Html.ValidationMessageFor(model => model[i].CreditStateTax, "", new { @class = "text-danger" })
                </td>
                <td>
                    @Html.DisplayFor(model => model[i].BillStartDate)
                    @Html.HiddenFor(model => model[i].BillStartDate)
                </td>
                <td>
                    @Html.DisplayFor(model => model[i].BillEndDate)
                    @Html.HiddenFor(model => model[i].BillEndDate)
                </td>
                <td>
                    @Html.DisplayFor(model => model[i].Ordocnum)
                    @Html.HiddenFor(model => model[i].Ordocnum)
                </td>
                <td>
                    @Html.DisplayFor(model => model[i].Docdate)
                    @Html.HiddenFor(model => model[i].Docdate)
                </td>

                <td style="display:none;">
                    @Html.HiddenFor(model => model[i].CartBillableItemId)
                </td>
                <td>
                    @Html.DisplayFor(model => model[i].Qty)
                    @Html.HiddenFor(model => model[i].Qty)
                </td>
            </tr>
        }
    </table> 

Answer 1

Поместите TH в THEAD, а остальные строки в TBODY, дайте TBODY ID и затем используйте

function totalIt() {
  var total = 0;
  $("#someTotalContainer").html("0.00");
  $(this).closest("tbody").find("input[type=checkbox]:checked").each(function() {
    var val = $(this).closest("tr").find("input.amt").val(); // or use the class of the input field
    total += isNaN(val) || val == "" ? 0 : +val;
  });
  $("#someTotalContainer").html(total.toFixed(2));
}

$(function() {
  $("#tbd").on("change", "input[type=checkbox]", totalIt);
  totalIt()
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="gridtable">
  <thead>
    <tr>
      <th>Select</th>
      <th>Charged Amount</th>
      <th>Credit Amount</th>
    </tr>
  </thead>
  <tbody id="tbd">
    <tr>
      <td><input type="checkbox"></td>
      <td>19</td>
      <td><input type="text" class="amt" value="19" /></td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>19</td>
      <td><input type="text" class="amt" value="19" /></td>
    </tr>
  </tbody>
</table>
$<span id="someTotalContainer"></span>