分组复选框 - jQuery / JS / ASP.NET答案

【问题标题】：Grouping Checkboxes - jQuery / JS / ASP.NET分组复选框 - jQuery / JS / ASP.NET
【发布时间】：2018-12-07 09:29:48
【问题描述】：

所以我使用 data-groupname 对复选框进行分组，并使用 jQuery 自动选择整个组，如果其中一个组成员被选中。

这是我的 JS 代码：

function checkAllList(listNavPath, selectAllId, checkBoxes) {

if (!checkBoxes) {
    checkBoxes = $(listNavPath + ":not(#" + selectAllId + ")")
}; //Exclude first checkbox

function selectAllCheckBoxes() {
    if (checkBoxes.filter(":checked").length == checkBoxes.length) {
        $("#" + selectAllId).prop("checked", true);
    } else {
        $("#" + selectAllId).prop("checked", false);
    }
}
selectAllCheckBoxes();

$(document).on("click", "#" + selectAllId, function () { checkBoxes.prop('checked', $(this).prop("checked")); });
$(document).on("click", checkBoxes, function (e) {
        var isChecked = $(e.target).prop("checked");
        var parent = $(e.target).parent();
        var groupName = $(parent).data("groupname");     
        var chs = $("[data-groupname='" + groupName + "']");

        $(chs).each(function (i) {           
            var chk = $(chs[i]).children().first();

            $(chk).prop('checked', isChecked);           
        })

这很好用，但我想将 .each() 限制为仅循环通过“组名父级”的父级（如果有意义的话）。换句话说，我不想在该表之外查找任何组名。在我的示例中，查看整个页面以查找该组名，然后如果“父组名”==“组名”则自动选择/取消选择该组，否则返回 true；继续循环。

这是我的 ASP 标记复选框。这样做是创建一列复选框，每行一个。复选框是从后面的代码动态生成的 (vb.net)。

<asp:TemplateField>
  <HeaderTemplate><asp:CheckBox runat="server" Checked="true" /></HeaderTemplate>
  <ItemTemplate><asp:CheckBox runat="server" data-groupname='<%#Eval("InvoiceCreditNumber")%>' Checked="true" ID="chkSelected" /></ItemTemplate>
</asp:TemplateField>

期待任何关于采取何种方法来完成这项工作的想法。

谢谢。

【问题讨论】：

不是很清楚标记最终是如何呈现的。您可以限制 var chs = $(...) 中的选择器或使用构造函数的上下文。 api.jquery.com/jquery/#jQuery-selector-context

标签： javascript jquery asp.net vb.net checkbox

【解决方案1】：

换句话说，我不想在那个表格之外寻找任何组名。

如果该表有 ID 或类，您可以将“[data-groupname='”+ groupName +“'] 的选择限制为该表，如下所示：

$("[data-groupname='" + groupName + "']", "#id-table");

或

$("#id-table").find("[data-groupname='" + groupName + "']");

【讨论】：

谢谢洛里斯。很高兴知道。事情是我想要一些更通用/动态的东西，而不指定表 id，而是通过某种方式检查它的父母。
我试过这个：$(this).closest('table').attr('id') 但由于某种原因我无法让它工作。
使用 .attr("id") 获取表的 ID。如果您想使用最接近且不使用 id 获取表中的所有组名，请尝试以下操作： $(this).closest('table').find("[data-groupname='" + groupName + "']")或 $("[data-groupname='" + groupName + "']", "table") （我不建议这样做，因为在某些情况下它可能过于笼统）。

【解决方案2】：

[已解决]

这是我为了让它发挥作用所做的：

我得到了这样的表：

var tblID = $(e.target).closest('.select-all');

因为.select-all 是我在使用复选框的所有表格中使用的一个类。

然后我只像这样在该表中循环：

 var chs = $(tblID).find("[data-groupname='" + groupName + "']")
        $(chs).each(function (i) {           
        var chk = $(chs[i]).children().first();         
        $(chk).prop('checked', isChecked);           
    })

感谢大家的回复。你们都赞成。

编码愉快。

【讨论】：