Go to DotNetFunda.com
  Welcome, Guest!  
LoginLogin  
{ Submit resources and get monthly gifts !!! }
Submit: Article | Interview Question | Joke | Question | Link || Search  
 Skip Navigation Links Home > Articles > Checking / UnChecking all checkboxes of the page dynamically in a single click

All Articles | Post Articles

Checking / UnChecking all checkboxes of the page dynamically in a single click

 Posted on: 6/7/2008 7:51:55 AM by SheoNarayan | Views: 709 | Category: JavaScript | Level: Advance | Print Article
This article descibes how to write a javascript function that will check/uncheck all the checkboxes of the page in a single click.
Introduction

Generally we came acroos in this situation when we need to facilitate the user to select or delsect all records of the page at a single click instead of selecting records one by one.  You can refer to below picture for example.

Scenario

This generally happens when you are presenting some records into GridView or DataGrid and you are providing a column called Select, instead of checking all records one by one you want to provide links called "Select All" or  "DeSelect All" to check and uncheck all checkboxes of the GridView respectively.  

Solution

HTML Code

To do that you need to provide a two links as displayed in the picture above. Following is the code for "Select All" and "DeSelect All" link.

 

<a href="javascript:void(0)" onclick="SelectAllCheckBoxes(true)">Select All</a> | <a href="javascript:void(0)" onclick="SelectAllCheckBoxes(false)">DeSelect All</a>

If Select All link will be clicked then SelectAllCheckBoxes javascript function will fire with parameter as true and when DeSelect All link will be clicked the same function will fire with paramter as false.

JavaScript Code

The code for JavaScript function SelectAllCheckBoxes are as follows

<script language="javascript" type="text/javascript">

function SelectAllCheckBoxes(action)

{

var myform=document.forms['aspnetForm'];

var len = myform.elements.length;

   for( var i=0 ; i < len ; i++)

   {

   if (myform.elements[i].type == 'checkbox')

      myform.elements[i].checked = action;

   }

}

</script>

In the above function first I am getting the html form element in the myform variables then I am getting the length of all elements on the page. Next I am looping through all the elements and checking for the element whose element type is checkbox as I am only interested about the checkbox element of the page. Once I got the checkbox element I am assiging the checked property to the parameter passed to this function (either true or false) and I am done.

Thats it!!!

Conclusion

Doing this was simpler than I had expected, hope this helps some one. Thanks and Happy Coding !!!



Bookmark and Share

About Sheo Narayan

Experience:6 year(s)
Home page:http://sheonarayan.blogspot.com/
Member since:Tuesday, July 08, 2008
Biography:Throughout 1st in all educational exams.
Major qualifications: HDCS, BCA, ADCA, MCA
Locations: Hyderabad, India
 Latest post(s) from SheoNarayan

   ◘ SEO friendly pagination using asp:DataPager control posted on 8/18/2008 9:54:23 AM
   ◘ ListView Tips and Tricks posted on 8/14/2008 5:43:53 AM
   ◘ Working with HttpHandler in IIS 7 posted on 7/28/2008 3:56:22 PM
   ◘ Service Oriented Architecture, a real world example in ASP.NET with C# posted on 7/27/2008 1:20:50 PM
   ◘ Difference between asp:LinkButton, asp:ImageButton, asp:Button and asp:HyperLink control posted on 7/15/2008 9:25:51 AM


Question: Why to use www.dotnetfunda.com google search?
Answer: This search has been especially optimized to search technical articles. You may find to-the-point results in comparison with other search.
Google
About Us | Contact Us | Privacy Policy and Terms of Use | Link Exchange | Members | Go Top
All rights reserved to DotNetFunda.com. Logos, company names used here if any are only for reference purposes and they may be respective owner's right or trademarks.
This site is best viewed with a resolution of 1280x720 (or higher) and Microsoft Internet Explorer 6.0+ or Firefox 2.0+.