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

因此，我使用数据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);           
        })    

这很好，但我想限制。每个循环只通过组名parent的父循环（如果有意义的话）。换句话说，我不想在该表之外查找任何组名。在我的示例中，我在整个页面上查找该组名称，然后如果父组名称==groupName，则自动选择/取消选择该组，否则返回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>

期待任何关于采取何种方法来实现这一目标的想法

谢谢

换句话说，我不想在该表之外查找任何组名

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

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

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

$[data groupname='+groupname+']，id表

或

$id表。查找[data groupname='+groupname+']

[已解决]

这就是我为了让它工作所做的：

我的桌子是这样的：

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

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

因为.select all是一个类，我将它用于我使用复选框的所有表

然后我只在表中循环如下：

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

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

谢谢大家的回复。你们都被选上了

---

愉快的编码。

不太清楚标记最终是如何呈现的。您可以在var chs=$中限制选择器。。。或者为构造函数使用上下文。谢谢你，洛里斯。很高兴知道。问题是我想要一些更通用/动态的东西，不需要指定表id，而是通过某种方式检查它的父项。我尝试了以下方法：$this.closest'table.attr'id'，但由于某些原因，我无法使其工作。使用.attrid可以获取表的id。如果您想使用最接近且没有id的方式获取表中的所有groupname，请尝试以下操作：$this.closest'table'。查找[data groupname='+groupname+']或$[data groupname='+groupname+']，table i不推荐此操作，因为在某些情况下它可能过于通用。