Question

I am using JQuery and I have below HTML with checkboxes in it.

 <div class="selectallitems">
                    <div class="selectall">
                        <asp:CheckBox ID="chkSelectAll" CssClass="selectall-txt" runat="server" />
                    </div>
                    <div id="divCheckAll">
                        <div class="selectall">
                            <asp:CheckBox ID="chkItemLists" CssClass="selectall-txt-1" runat="server" />
                            <div class="clear">
                            </div>
                        </div>
                        <br />
                        <div class="selectall">
                            <asp:CheckBox ID="chkComponentLinks" CssClass="selectall-txt-1" runat="server" />
                            <div class="clear">
                            </div>
                        </div>
                        <br />
                        <div class="selectall">
                            <asp:CheckBox ID="chkResourceKeyData" CssClass="selectall-txt-1" runat="server" /></div>
                        <br />
                    </div>
                </div>

Now I want whenever user selects “chkSelectAll” then it should select all other checkboxes and whenever user deselect any of them it should deselect the “chkSelectAll”.

Please suggest!!

Answer 1

You would basically do something like this:

$('#myCheckAllCheckbox').click(function()
{
     // Other jQuery versions:
     if(this.checked)
        $('input[@type=checkbox]').attr('checked', 'checked');
     else
        $('input[@type=checkbox]').removeAttr('checked');

     // jQuery 1.6
     $('input[@type=checkbox]').prop('checked', this.checked);
});