Monday, April 2, 2012

Select-all checkbox Jquery for ASP.NET GridView,DataList,Repeater etc.

Scenario
1.On Parent check box Selecting, All - Child check boxes should be checked.
2.On Manually Selecting all child check boxes, parent should be checked.
3.Deselecting one of the child check box Parent should be deselected

Markup Code for Reapeter
same thing can be done using Gridview or DataList also.
I have used only cssclass for selecting appropriate control so you don't have to worry about what html parsing id's of checkboxes.


 <asp:Repeater ID="rpSections" runat="server">  
           <HeaderTemplate>  
             <table class="def_table" width="100%">  
               <tr>  
                 <th>  
                   <asp:Label runat="server" ID="lblQuestionnaireTypeHeader" />  
                 </th>  
                 <td align="left">  
                   <asp:CheckBox ID="cbCheckAll" runat="server" CssClass="chkHeader" />  
                 </td>  
               </tr>  
           </HeaderTemplate>  
           <ItemTemplate>  
             <tr>  
               <td>  
                 <%# DataBinder.Eval(Container.DataItem,"Section.SurveyName" ) %>  
               </td>  
               <td>  
                 <asp:CheckBox ID="chk" runat="server" CssClass="chkItem" />  
               </td>  
             </tr>  
           </ItemTemplate>  
           <FooterTemplate>  
             </table>  
           </FooterTemplate>  
         </asp:Repeater>  

Jquery code (don't forget to add jquery reference)

  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.js" type="text/javascript"></script>  

No comments:

Post a Comment