Grouping Checkboxes - jQuery / JS / ASP.NET

Question

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:

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

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.

Not very clear how the markup is finally rendered. You can restrict the selector in var chs = $(...) or use context for the constructor. api.jquery.com/jquery/#jQuery-selector-context — marekful
– marekful, Commented Jun 28, 2018 at 10:36

Loris · Accepted Answer · 2018-06-28 10:56:30Z

2

In other words, I don't want to look for any group-names outside of that table.

If that table has an ID or a class, you can limit the selection of "[data-groupname='" + groupName + "'] to the table, like this:

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

or

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

answered Jun 28, 2018 at 10:56

Loris

1018 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Marian Pop Over a year ago

Thanks Loris. That's good to know. Thing is I want something more generic / dynamic without specifying the table id but by checking somehow it's parents.

Marian Pop Over a year ago

I tried this: $(this).closest('table').attr('id') but for some reason I can't make it work.

Loris Over a year ago

With .attr("id") you take the ID of the table. If you want to take all the groupname inside the table using closest and no id, try this: $(this).closest('table').find("[data-groupname='" + groupName + "']") or $("[data-groupname='" + groupName + "']", "table") (i dont reccommend this, because it could be too generic in some situations).

Marian Pop · Accepted Answer · 2018-06-28 13:28:33Z

0

[SOLVED]

This is what I did in order to make it work:

I got the table like this:

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

because .select-all is a class that I'm using for all the tables where I use checkboxes.

and then I only loop within that table like this:

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

Thanks everyone for your responses. You are all upvoted.

Happy coding.

answered Jun 28, 2018 at 13:28

Marian Pop

3615 silver badges18 bronze badges

Collectives™ on Stack Overflow

Grouping Checkboxes - jQuery / JS / ASP.NET

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related