复选框中的检查值返回 NaN

Question

I have a website about medicines and i want to calculate the total sum of checked medicines (i have price) and for that im using a JS script but when i check the checkboxes the return i get is "NaN" instead of the price. Can i get some help solving this issue?

Here is my Table:

 @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Quantity)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Price)
                </td>

                <td>
                    @if (User.IsInRole("Administrator"))
                    {
                        @Html.ActionLink("Edit", "Edit", new { id = item.Id }, new { @class = "btn btn-info" })
                        <button data-id="@item.Id" class="btn btn-warning js-delete">Delete</button>
                    }
                    @if (User.IsInRole("Pharmacist"))
                    {

                        @item.Id<input type="checkbox" name="selectedNames" value="@item.Id" />

                    }
                </td>
            </tr>
        }
    <p id="tot"></p>

and here is my JS:

$(function () {
        var total;
        var checked = $('input:checkbox').click(function (e) {
            calculateSum();
        });
         function calculateSum() {
            var $checked = $(':checkbox:checked');
            total = 0.0;
            $checked.each(function () {
                total += parseFloat($(this).next().text());
            });
            $('#tot').text("Total Amount: " + total.toFixed(2));
        }
    })

Answer 1

Consider the following example.

 $(function() { var total; function calculateSum() { total = 0.0; $("input[type='checkbox']:checked").each(function(i, el) { total += parseFloat($(el).closest("tr").find("td").eq(2).text()); }); $('#tot').html("Total Amount: " + total.toFixed(2)); } $('input:checkbox').click(calculateSum); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <thead> <tr> <th>Name</th> <th>Qnty</th> <th>Price</th> <td>&nbsp;</td> </tr> </thead> <tbody> <tr> <td>Item 1</td> <td>10</td> <td>5.00</td> <td> <button data-id="item-1" class="btn btn-warning js-delete">Delete</button> <input type="checkbox" name="selectedNames" value="item-1" /> </td> </tr> <tr> <td>Item 2</td> <td>20</td> <td>10.00</td> <td> <button data-id="item-2" class="btn btn-warning js-delete">Delete</button> <input type="checkbox" name="selectedNames" value="item-2" /> </td> </tr> <tr> <td>Item 3</td> <td>30</td> <td>15.00</td> <td> <button data-id="item-3" class="btn btn-warning js-delete">Delete</button> <input type="checkbox" name="selectedNames" value="item-3" /> </td> </tr> </table> <p id="tot"></p>

This uses a similar structure of HTML. When the User clicks a checkbox, the click callback is called. A named function can be used as the callback.

The calculation function runs and checks for checked checkboxes. When found, it seeks the price column (from a 0 index, this is column 2). Once parsed from Text, it is added to the total .