Javascript 如何使用元素'正确计数html表列的复选框；什么课？

实际上，我正在尝试使用jQuery从razor页面中的HTML表列获取选中复选框的计数。我没有收集复选框的ID，而是尝试使用类来维护计数。但是，当我单击该复选框时，计数将开始：2 x表总行数+复选框。这是一个.css文件问题吗？我正在使用mvc项目中的模型加载复选框列（附加）

这是我的脚本：

$(document).ready(function () {


        $(".tblChkBx").change(function () {
            $("#lblCountRecords").text($(".tblChkBx").filter(":checked").length);
        });

}

HTML

<div class="row">
    <table id="data"
           class="table table-striped table-hover">
        <thead>
            <tr id="thead"
                class="reviewsubhead">

                <th>guest name</th>
                <th>
                    <div class="form-control" onclick="clearRadio()" font-size:8px;">
                        <a id="btnClear" class="arrow-link" onclick="clearRadio()" style="font-size: 0.77em;">
                            clear: <label id="lblCountRecords">0</label>/<label id="lblTotalCount">0</label>
                        </a>
                    </div>
                </th>
            </tr>
        </thead>
        <tbody id="tbody">
            @for (int guestNum = 0; guestNum < Model.GuestUserList.Count; guestNum++)
            {
                <tr>

                    <td>@Model.GuestUserList[guestNum].Name</td>
                    <td align="center">
                        @Html.CheckBoxFor(c => c.GuestUserList[guestNum].ChkBox, new { @class = "tblChkBx" })
                        @Html.HiddenFor(c => c.GuestUserList[guestNum].Req_id)
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>

客人姓名
不确定，但我认为你的选择器错了。我对razor一无所知，但假设它呈现为标准html，那么它应该是呈现的

将起作用的选择器如下所示：

console.log($("input[type='checkbox']:checked").length)

我认为这个老问题可能有一个很好的答案，对你也很有帮助-看起来基本上做了同样的事情：