check uncheck checkboxes based on header checkbox selection

See more:

ASP.NET

ModalPopUpExtender

Hii ,

<div class="IFrameContainer">
 <div class="modalPopupContainer_AddUpdate_Inner1">
     <div id="Main1">
         <div class="row">
             <div class="box_1">
                 <div class="details_02  push-left offset1">
                     <p>Select Year </p>
                 </div>
                 <div class="details_01 col_1  push-left ">
                     <asp:DropDownList runat="server" ID="drpYear" AutoPostBack="true" OnSelectedIndexChanged="drpYear_SelectedIndexChanged">
                 </div>

                 <div class="clear"></div>
             </div>
             <br />

             <div class="box_1">
                 <div class="details_01  push-left offset1">
                     <p>Select All </p>
                 </div>
                 <div class="details_01 col_1  push-left ">
                     <asp:CheckBox ID="chkHeader" runat="server" />
                 </div>
                 <div class="clear"></div>
             </div>
             <br />

             <div class="offset2">
                 <div class="margbottom">&nbsp;</div>

                 <div id="dvObjectives"  runat="server" visible="false">
                     <div class="details_021  push-left offset1">
                         <p>Objective </p>
                     </div>
                     <div class="details_01 col_1  push-left ">
                         <asp:CheckBox runat="server" ID="chkObjectives" row="child" />
                     </div>
                 </div>

                 <div class="clear"></div>
                 <div class="margbottom">&nbsp;</div>

                 <div id="dv121"  runat="server" visible="false">
                     <div class="details_021 push-left offset1">
                         <p>1 to 1 </p>
                     </div>
                     <div class="details_01 col_1  push-left ">
                         <asp:CheckBox ID="chk121" runat="server" row="child" />
                     </div>
                     <div class="details_01 col_1  push-left ">
                         <asp:DropDownList runat="server" ID="drpLatest121">
                     </div>
                 </div>

                 <div class="clear"></div>
                 <div class="margbottom">&nbsp;</div>

                 <div id="dvDevelopment"  runat="server" visible="false">
                     <div class="details_021 push-left offset1">
                         <p>Development </p>
                     </div>
                     <div class="details_01 col_1  push-left ">
                         <asp:CheckBox ID="chkDevelopment" runat="server" row="child" />
                     </div>
                 </div>

                 <div class="clear"></div>
                 <div class="margbottom">&nbsp;</div>

                 <div id="dvQualification"  runat="server" visible="false">
                     <div class="details_021 push-left offset1">
                         <p>Qualification  </p>
                     </div>
                     <div class="details_01 col_1  push-left ">
                         <asp:CheckBox ID="chkQualification" runat="server" row="child" />
                     </div>
                 </div>

                 <div class="clear"></div>
                 <div class="margbottom">&nbsp;</div>

                 <div id="dvTraining"  runat="server" visible="false">
                     <div class="details_021 push-left offset1">
                         <p>Training</p>
                     </div>
                     <div class="details_01 col_1  push-left ">
                         <asp:CheckBox ID="chkTraining" runat="server" row="child" />
                     </div>
                 </div>

                 <div class="clear"></div>
                 <div class="margbottom">&nbsp;</div>

                 <div id="dvCareerAspiration"  runat="server" visible="false">
                     <div class="details_021 push-left offset1">
                         <p>Career Aspiration</p>
                     </div>
                     <div class="details_01 col_1  push-left ">
                         <asp:CheckBox ID="chkCareerAspiration" runat="server" row="child" />
                     </div>
                 
             

             <div class="clear"></div>

             <div class="margbottom">&nbsp;</div>
             <div class="box">
                 <div class="details_01   offset1"  runat="server">
                     <p>Appraisal</p>
                 </div>
                 <div class="offset3">
                     <div class="margbottom">&nbsp;</div>

                     <div id="dvMiniAppraisal"  runat="server" visible="false">
                         <div class="details_021  push-left offset1">
                             <p>Mini Appraisal </p>
                         </div>
                         <div class="details_01 col_1  push-left ">
                             <asp:CheckBox ID="chkMiniAppraisal" runat="server" row="child" />
                         </div>
                     </div>

                     <div class="clear"></div>
                     <div class="margbottom">&nbsp;</div>

                     <div id="dvMidYearAppraisal"  runat="server" visible="false">
                         <div class="details_021 push-left offset1">
                             <p>Mid Year Appraisal</p>
                         </div>
                         <div class="details_01 col_1  push-left ">
                             <asp:CheckBox ID="chkMidYearAppraisal" runat="server" row="child" />
                         </div>
                     

                     <div class="clear"></div>
                     <div class="margbottom">&nbsp;</div>

                     <div id="dvEndYearAppraisal"  runat="server" visible="false">
                         <div class="details_021 push-left offset1">
                             <p>End Year Appraisal</p>
                         </div>
                         <div class="details_01 col_1  push-left ">
                             <asp:CheckBox ID="chkEndYearAppraisal" runat="server" row="child" />
                         </div>
                     

                     <div class="clear"></div>

                 
                 <div class="margbottom">&nbsp;</div>

                 <div class="offset2">
                     <div class="margbottom">&nbsp;</div>

                     <div id="dvActions"  runat="server" visible="false">
                         <div class="details_021  push-left offset1">
                             <p>Actions</p>
                         </div>
                         <div class="details_01 col_1  push-left ">
                             <asp:CheckBox ID="chkActions" runat="server" row="child" />
                         </div>
                     </div>

                     <div class="clear"></div>
                     <div class="margbottom">&nbsp;</div>

                     <div id="dvPersonalNotes"  runat="server" visible="false">
                         <div class="details_021 push-left offset1">
                             <p>Personal Notes</p>
                         </div>
                         <div class="details_01 col_1  push-left ">
                             <asp:CheckBox ID="chkPersonalNotes" runat="server" row="child" />
                         </div>
                     

                     <div class="clear"></div>

this is my div structure ..

What i want to achive is clicking on header check box i want child checkboxes gets clicked , if i uncheck header all the childs gets unchecked ..

however this functionality is working .. but the problem is when i click on child check box header should gets unchecked even this is working .. but i check any child item check again .. and if all childs are checked then it should checked header checkbox as well which is not working ..

Please suggest