javascript - 如何使用元素的类正确计算 html 表格列的选中复选框？

Question

我实际上正在尝试使用 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>

知道出了什么问题吗？

Answer 1

不确定，但我认为您的选择器是错误的。我对 razor 一无所知，但假设它渲染为标准 html，那么它应该渲染 <input type=checkbox> 的

可以使用的选择器是这样的:

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