Question

I am using JQuery and I have below HTML with checkboxes in it. I have got one master checkbox called chkSelectAll and the child checkboxes inside the DIV.

 <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 as well as if all the three checkboxes are again selected then chkSelectAll will be selected also and if all the three are not selected then master checkbox chkSelectAll will also be deselected.

Please suggest!!

Answer 1

This is an optimized and more compact version. The others should work fine, but they are running selectors all the time unnecessarily. Here all the selectors are saved in the beginning.

var $selectAll=$('#chkSelectAll'),
    $checks=$('#divCheckAll :checkbox');

$selectAll.change(function () {
    $checks.attr('checked', this.checked);
});

$checks.change(function () {
    $selectAll.attr('checked', $checks.not(':checked').length==0);
});

jsFiddle Demo