jeudi 28 juin 2018

Grouping Checkboxes - jQuery / JS / ASP.NET

So I am grouping the checkboxes with data-groupname and use jQuery to auto-select the whole group if one of the group member is checked.

Here's my JS code:

$(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);           
        })    

This works just fine but I want to limit the .each() to only loop thru the parent of "group name parent" if that makes sense. In other words, I don't want to look for any group-names outside of that table. In my example is looking on the whole page to find the that group name and then if "Parent Group Name" == "groupName" then auto-select / deselect the group or else return true; to continue the loop.

This is my checkbox the ASP markup. What this does, is creating a column of checkboxes, one per each row. The checkboxes are generated dynamically from the code behind (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>

Looking forward for any ideas of what approach to take in order to make this work.

Thanks.




Aucun commentaire:

Enregistrer un commentaire