Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

How to check/uncheck all items in CheckBoxList ASP.NET

Author: Jeff Nava

In this article, you will learn how to check/uncheck all items in CheckBoxList in ASP.NET and also in JavaScript.

 

First we will see how to do it in code behind file.

  1. Open Visual Studio 2010
  2. File > New > Website
  3. Visual basic or Visual C# > ASP.NET Web Site
  4. Website > Add New Item > Web Form
  5. Write code below in aspx page

    <asp:CheckBoxList ID="CheckBoxList1" runat="server">
       
        <asp:ListItem>First Item</asp:ListItem>
       
        <asp:ListItem>Second Item</asp:ListItem>
       
        <asp:ListItem>Third Item</asp:ListItem>
       
    </asp:CheckBoxList>
       
            <br />
       
    <asp:Button ID="Button1" runat="server" Text="Check All" OnClick="btnCheckAll_Click"/>
       
    <asp:Button ID="Button2" runat="server" Text="Uncheck All" OnClick="btnUncheckAll_Click" />


    I have added a CheckBoxList Control and added three items to it. Then I have added two buttons, one to check all items and other is to uncheck all items.
     
  6.  Now add code below in code behind file

    C#
     
    protected void btnCheckAll_Click(object sender, EventArgs e) {
        foreach (ListItem listItem in CheckBoxList1.Items) {
           listItem.Selected = true;
        }
     
    }
    protected void btnUncheckAll_Click(object sender, EventArgs e) {
        foreach (ListItem listItem in CheckBoxList1.Items) {
            listItem.Selected = false;
        }
    }
     
    VB.NET
     
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
        For Each listItem As ListItem In CheckBoxList1.Items
            listItem.Selected = True
        Next
    End Sub
     
    Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click
        For Each listItem As ListItem In CheckBoxList1.Items
            listItem.Selected = False
        Next
    End Sub
     
    I have written button click events for both buttons. Then I have set the “Selected” of checkbox to true by using foreach loop.
     
  7.  Now see the web site in browser and click on buttons to see the result

 

Now we will see how to chech/uncheck all items in CheckBoxList by using JavaScript.

 

  1. Create a new web site or use same website for this.
  2. If you want to use same website for this example then comment the code in code behind file.
  3. Write code below in aspx page.

    <asp:CheckBoxList ID="CheckBoxList1" runat="server">
       
            <asp:ListItem>First Item</asp:ListItem>
       
            <asp:ListItem>Second Item</asp:ListItem>
       
            <asp:ListItem>Third Item</asp:ListItem>
       
        </asp:CheckBoxList>
       
            <br />
       
     
       
    <asp:Button ID="btnCheckAll" runat="server" Text="Check All" OnClientClick="javascript: CheckAll('CheckBoxList1')" />
       
    <asp:Button ID="btnUncheckAll" runat="server" Text="Uncheck All" OnClientClick="javascript: UncheckAll('CheckBoxList1')" /> 
     
    I have added “onClientClick” in both buttons and add CheckAll() and UncheckAll() JavaScript functions with CheckBoxList ID as argument.
     
  4.  Add <Script> tag in <head> tag of aspx page and write JavaScript functions as under:

    <script type="text/javascript">
       
        function CheckAll(checkbox) {
       
            var checkboxlist = document.getElementById(checkbox);
       
            var count = checkboxlist.getElementsByTagName("input");
       
            for (var i = 0; i < count.length; i++) {
       
                count[i].checked = true;
       
            }  
       
            return false;
       
        }
       
        function UncheckAll(checkbox) {
       
            var checkboxlist = document.getElementById(checkbox);
       
            var count = checkboxlist.getElementsByTagName("input");
       
            for (var i = 0; i < count.length; i++) {
       
                count[i].checked = false;
       
            }
       
            return false;
       
        }
       
    </script>
     
    First I have get the CheckBoxList by getElementById() method of “document”.  ASP.NET renders each CheckBox as input tag so I have get it with getElementByTagNme() method. Then I have used a “for” loop to set each CheckBox true or false.
          
  5.  Now see the web site in browser and click on buttons to see the result.

 

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< Store Session State in SQL Server ASP.NET

Disclaimer - Privacy
© 2002-2017 DevASP.net