Checked values from checkboxes return 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.