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

【问题标题】：How to properly count checked checkboxes of html table column using element's class?如何使用元素的类正确计算 html 表格列的选中复选框？
【发布时间】：2020-02-07 20:57:18
【问题描述】：

我实际上正在尝试使用 jQuery 从剃刀页面中的 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>

有什么想法吗？

【问题讨论】：

我认为这个较老的问题可能有一个很好的答案，对你也有帮助 - 似乎在做同样的事情：stackoverflow.com/questions/35893085/…

标签： javascript jquery html razor

【解决方案1】：

不确定，但我认为您的选择器是错误的。我对剃须刀一无所知，但假设它呈现为标准 html，那么它应该呈现的

一个可以工作的选择器是这样的：

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

【讨论】：