Select in jQuery

Question

See the following markup,

<div style="width: 30%;">
    <asp:Repeater ID="rptParent" runat="server" OnItemDataBound="rptParent_ItemDataBound">
        <ItemTemplate>
            <table id="tblRoleHdr" style="border-style: solid; border-width: 1px;
                border-color: Red;">
                <tr>
                    <td style="width: 1%;">
                        <asp:CheckBox ID="chkRoleHdr" runat="server" />
                    </td>
                    <td style="width: 50%;">
                        <asp:HiddenField ID="hidRoleID" runat="server" Value='<%#Eval("RoleID") %>' />
                        <asp:Label ID="lblRole" runat="server" Text='<%#Eval("Role") %>'></asp:Label>
                    </td>
                    <td style="width: 1%;">
                        <asp:CheckBox ID="chkP1Hdr" runat="server" CssClass="chkP1Hdr" />
                    </td>
                    <td style="width: 1%;">
                        <asp:CheckBox ID="chkP2Hdr" runat="server"  CssClass="chkP2Hdr" />
                    </td>
                    <td style="width: 1%;">
                        <asp:CheckBox ID="chkP3Hdr" runat="server"  CssClass="chkP3Hdr" />
                    </td>
                </tr>
            </table>
            <asp:Repeater ID="rptChild" runat="server">
                <HeaderTemplate>
                    <table id="tblChild" class="tblChild" style="border-style: solid; border-width: 1px;
                border-color:Green;">
                </HeaderTemplate>
                <ItemTemplate>
                    <tr>
                        <td style="width: 1%;">
                            &nbsp;&nbsp;&nbsp;&nbsp;
                        </td>
                        <td style="width: 50%;">
                            <asp:HiddenField ID="hidUserID" runat="server" Value='<%#Eval("UserID") %>' />
                            <asp:Label ID="lblUser" runat="server" Text='<%#Eval("User") %>'></asp:Label>
                        </td>
                        <td style="width: 1%;">
                            <asp:CheckBox ID="chkP1Child" runat="server" CssClass="chkP1Child" />
                        </td>
                        <td style="width: 1%;">
                            <asp:CheckBox ID="chkP2Child" runat="server" CssClass="chkP2Child"/>
                        </td>
                        <td style="width: 1%;">
                            <asp:CheckBox ID="chkP3Child" runat="server" CssClass="chkP3Child" />
                        </td>
                    </tr>
                </ItemTemplate>
                <FooterTemplate>
                    </table>
                </FooterTemplate>
            </asp:Repeater>
        </ItemTemplate>
        <SeparatorTemplate>
            <hr />
        </SeparatorTemplate>
    </asp:Repeater>
</div>

It will generate the following output

enter image description here

What I need to do in jQuery is

If I click the check box marked in RED color, all the check boxes belongs to the group will get selected.
If I check BLUE HEADER CHECK BOX, then all the check box in the column will get selected
The step 2 for the remaining two check boxes.

Could you please see the classes I specified for check boxes. How can I accomplish the task using jQuery ?

score 1 · Answer 1 · answered Dec 03 '11 at 18:26

If you can change your markup a bit, you can use some extra classes and data- attributes to get the effect you want. First, each checkbox that needs to be auto-selected by group/column will need a group-level and/or column-level class. For example:

<input type="checkbox" class="groupA column3" />

Next, the heading checkboxes will all need to share a common class that can be targeted with jQuery and data- attributes to tie them together with the checkboxes they need to control.

<input type="checkbox" class="groupHeading" data-group="GroupA" />
<input type="checkbox" class="columnHeading" data-group="GroupA" data-column="Column3" />

With this information, jQuery can do the rest.

// Handle group heading change
$('.groupHeading').change(function () {
  // Set checked state to all checkboxes with class matching data-group
  $('.'+$(this).data('group')).attr('checked', $(this).is(':checked'));
});

// Handle column heading change
$('.columnHeading').change(function () {
  // Set checked state to all checkboxes with class matching data-group and data-column
  $('.'+$(this).data('group')+'.'+$(this).data('column')).attr('checked', $(this).is(':checked'));
});

You can see a working example at http://jsfiddle.net/eKxJm/1/.

All the items are dynamically created. I can not hard code 'GroupA' something like..? — Rauf, Dec 04 '11 at 08:31

Adam Rackis · Answer 2 · 2011-12-03T18:17:51.580

0

This should get you started. This will listen for any checboxes that get checked. If the checkbox has the class chkP1Hdr, and it's checked, then it checks all the chkP1Child children.

$("input[type='checkbox']").change(function () {
    if ($(this).hasClass("chkP1Hdr") && this.checked)
        $(".chkP1Child").attr("checked", true);
    if ($(this).hasClass("chkP2Hdr") && this.checked)
        $(".chkP2Child").attr("checked", true);
    if ($(this).hasClass("chkP3Hdr") && this.checked)
        $(".chkP3Child").attr("checked", true);
});

And so on for 2 and 3

edited Dec 03 '11 at 18:17

answered Dec 03 '11 at 17:48

Adam Rackis

82,527
56
270
393

Don't use `$(this).attr("checked")` to get the current state of the `checked` property. Use `this.checked` instead since it avoids extra overhead. Also, `attr()` isn't really giving you the attribute, but rather the property value, so if you were to use jQuery, `.prop()` would be more appropriate. They tried to correct their `.attr()` method in `1.6` so that it would appropriately only deal with attributes, but it was far too late, and thus was such a massive failure of broken code that they immediately rolled back much of the change in `1.6.1`. – RightSaidFred Dec 03 '11 at 18:12
@RightSaidFred - I switched it, thank you. I can see why this.checked would avoid the overhead, but can you please explain what you mean by `isn't really giving you the attribute, but rather the property value`? Isn't the property value what I want? Don't I want to check for a truthy value of the checked property value? – Adam Rackis Dec 03 '11 at 18:19
@RightSaidFred - sorry, in thinking about it some more...what's the difference between the checked property value, and the checked attribute? Doesn't the latter control the former? – Adam Rackis Dec 03 '11 at 18:20
Regarding your first comment, yes you want the checked property. That was a clumsy transition into my explanation of the trouble(s) with their `attr()` method. My point was that `attr()` looks like it is giving you the *attribute*, but it sometimes gives you the *property*. And in the case of checked, no, the attribute remains unchanged when the property is changed. So it isn't like the ID attribute/property. [Here's an example.](http://jsfiddle.net/m4xGv/) – RightSaidFred Dec 03 '11 at 18:24
@RightSaidFred - so if the attribute remains unchanged when the property is changed, I guess that's one of the reasons you said to use `this.checked` to **read** the value. Since that'll always be right. Also, am I understanding correctly that to **change** the checked property, you **should** use the attr function, so that both the attribute *and* property will be correct? – Adam Rackis Dec 03 '11 at 18:36
Pre-1.6 `.attr()`, it only changes the *property*. Post-1.6 `.attr()` changes both the *attribute* and the *property*. I'm guessing that 1.6 `.attr()` only changes the *attribute*. This is part of the fiasco of `.attr()`. – RightSaidFred Dec 03 '11 at 18:44
@RightSaid - thank you - sometimes I feel like I'm learning more than the people I'm answering questions for :-) – Adam Rackis Dec 03 '11 at 18:51
You're welcome, and I know exactly what you mean. http://stackoverflow.com/questions/8369338/javascript-dumping-all-global-variables/8369361#comment10326883_8369361 :) – RightSaidFred Dec 03 '11 at 18:54

Select in jQuery

2 Answers2