药品网站复选框计算选中药品总价返回NaN问题求助

问题情况 #

运营药品网站时，需要计算勾选药品的总价（已配置价格字段），采用JavaScript实现，但勾选复选框时返回结果为NaN而非正确价格，需排查解决。

现有代码 #

表格（Razor视图）代码：

@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>

JavaScript代码：

$(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));
    }
})

问题原因 #

代码核心逻辑错误：

• 复选框位于<td>内部，没有后续同级元素（Razor代码中复选框紧跟@item.Id，无其他兄弟元素），$(this).next()返回空元素，text()得到空字符串。
• parseFloat("")会返回NaN，累加后total直接变成NaN，导致最终显示异常。

修复方案 #

步骤1：给价格单元格添加标识类

修改Razor视图中的价格单元格，添加class="price-cell"，方便JS精准定位：

<td class="price-cell">
    @Html.DisplayFor(modelItem => item.Price)
</td>

步骤2：修正JavaScript的价格获取逻辑

通过复选框找到所在的表格行，再定位到该行的价格单元格，获取并解析价格：

$(function () {
    var total;
    $('input:checkbox').click(function (e) {
        calculateSum();
    });
     function calculateSum() {
        var $checked = $(':checkbox:checked');
        total = 0.0;
        $checked.each(function () {
            // 获取当前复选框所在行的价格文本，去除多余空格
            var priceText = $(this).closest('tr').find('.price-cell').text().trim();
            // 解析价格，若解析失败默认加0，避免NaN
            var price = parseFloat(priceText) || 0;
            total += price;
        });
        $('#tot').text("Total Amount: " + total.toFixed(2));
    }
})

额外优化点 #

• 用trim()处理价格文本中的空格，避免因格式问题导致解析失败；
• 用parseFloat(priceText) || 0做容错处理，即使价格文本非数字，也不会让总价变成NaN。

内容的提问来源于stack exchange，提问作者David