Go to DotNetFunda.com
 Online : 2809 |  Welcome, Guest!   Login
 
Home > Articles > JavaScript > Checking / UnChecking all checkboxes of the page dynamically in a single click
  • Nominate yourself for FREE online training by Microsoft MVP on OOPS, ASP.NET, ADO.NET and Sql Server.
    Brought to you by DotNetFunda.Com. You can refer to your friends as well !

  • Now you can recommend your article from any website to be selected as "Article of the Day" on DotNetFunda.Com website. If approved, that article will be featured on our home page.

General Notice: If you found copied contents on this page, please let us know the original source along with your correct email id (to communicate) for further action.

Submit Article | Articles Home | Search 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: 4095 | 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.

Ask all your .NET related questions/clarifications here to get quicker solution.

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 !!!


Interesting?   Share and Bookmark this kick it on DotNetKicks.com


About Sheo Narayan

Experience:8 year(s)
Home page:http://www.snarayan.com
Member since:Tuesday, July 08, 2008
Level:Starter
Status: [Administrator]
Biography:Throughout 1st in all educational exams.
Major qualifications: HDCS, ADCA, MCA, MCTS
Location: Hyderabad, India
 Latest post(s) from SheoNarayan

   ◘ Common operation with Files and Folders in ASP.NET posted on 9/4/2009 4:23:03 PM
   ◘ Working with CustomValidator control in ASP.NET posted on 8/19/2009 9:27:43 AM
   ◘ Backup and Restore database in ASP.NET posted on 8/7/2009 5:30:24 PM
   ◘ Passing data between layers using Generic list collection posted on 7/19/2009 7:28:40 AM
   ◘ jQuery and ASP.NET AJAX UpdatePanel posted on 7/17/2009 6:53:04 PM


 Responses
Posted by: Skoon | Posted on: 30 Sep 2008 12:14:46 PM

This code works provided that the checkboxes are contained within a form element. If you need to ensure that you get all checkboxes, you can use the document.getElementsByTagName method to get a reference to all of the inputs on a page, then iterate over them and check the type.

Posted by: SheoNarayan | Posted on: 30 Sep 2008 12:23:53 PM

Thanks for pointing this out Skoon. Appreciate it.

--
Regards

Posted by: Arvindk | Posted on: 09 Oct 2008 10:17:28 AM

We also need to take care of checkboxes outside the Datagrid, and we want only to select/unselect checkboxes inside data grid only. If we have a single checkbox the page outside the Datagrid. This code will select/ unselect all the checkboxes on the page iside or outside the Datagrid. Isn't It?

Posted by: SheoNarayan | Posted on: 09 Oct 2008 10:37:21 AM

Correct, There can be a work around. You may filter checkboxes for its name/id inside if condition for a particular pattern and if it satisfy then execute myform.elements.checked = action; line.

Submit Article


About Us | The Team | Advertise | Contact Us | Feedback | Privacy Policy | 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.
(Best viewed in IE 6.0+ or Firefox 2.0+ at 1024 * 768 or higher)