Intermediate checkbox in asp.net

My code works fine in case if the I check the main check box all the child check boxes get selected too but when I click the chid first the parent check box does not get check
Here is my asp.net webforms code

<table id="dtPage" class="table  table-striped table-hover ">
                                        <thead>
                                            <tr>

                                                <th>
                                                    <asp:CheckBox ID="chkActiveUsers"
                                                        runat="server" ClientIDMode="Static" />Associate</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                </HeaderTemplate>
                                <ItemTemplate>
                                    <tr>
                                        <td>
                                            <asp:CheckBox ID="chkUserStatus" CssClass="enable-user" runat="server" />

                                        </td>
                                    </tr>

and Here is my javascript

  $(document).ready(function () {
        $('#chkActive').click(function () {

            $(".enable input[type='checkbox']").prop('checked', $(this).is(':checked'));
        });

        $('#chkActiveUsers').click(function () {

            $(".enable-user input[type='checkbox']").prop('checked', $(this).is(':checked'));
        });
    });

My Question is: How can I make it work like vice versa i.e. when child is check parent should get check too and when no child is checked parent should get unchecked too