Saturday, 31 August 2013

CheckBox select / De Select All using Javascript.


CheckBox SelectAll / DeSelectAll


                In this article I'm trying to explain how to select all checkboxes and how to deselect all checkboxes using single click. For this I'm introducing JavaScript function using this JavaScript function easy to select all checkboxes and deselect all checkboxes and call that JavaScript function in control itself.



JavaScript:



for Select and DeSelect All Checkboxes purpose I wrote some JavaScript function. Use below lines of code.


< script type="text/Javascript" >

 function Check(parentChk,container) 
        {
            var elements =  document.getElementsByTagName("INPUT"); 
            for(i=0; i            {
                if(parentChk.checked == true) 
                {  
                    if( IsCheckBox(elements[i]) && IsMatch(elements[i].id,container)) 
                    {
                     elements[i].checked = true; 
                    }         
                }
                else 
                {
                 if( IsCheckBox(elements[i]) && IsMatch(elements[i].id,container)) 
                    {
                        elements[i].checked = false; 
                    }
                }       
            }       
        }
< script>


Source code:


Call that JavaScript function in header control checkbox.


<asp:GridView ID="GV" runat="server" ShowFooter="false" Width="100%"
         EnableModelValidation="True" ForeColor="#333333" 
         GridLines="Vertical" AutoGenerateColumns="false" >
                 
         <Columns>
              <asp:TemplateField >
                   <HeaderTemplate>
                        <input id="HchkSelect" type="checkbox" onclick="javascript:Check(this,'GV');" />                               
                   </HeaderTemplate>
                   <ItemTemplate>
                        <asp:CheckBox ID="chkSelect" runat="server" />
                   </ItemTemplate>
                   <ItemStyle HorizontalAlign="center" />
             </asp:TemplateField>
        </Columns>
</asp:GridView>