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

SheoNarayan
Posted by in JavaScript category on for Advance level | Views : 18433 red flag

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

Page copy protected against web site content infringement by Copyscape

About the Author

SheoNarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com
http://www.snarayan.com
Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Posted by: Skoon on: 9/30/2008
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 on: 9/30/2008
Thanks for pointing this out Skoon. Appreciate it.

--
Regards

Posted by: Arvindk on: 10/9/2008
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 on: 10/9/2008
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[i].checked = action; line.


Login to post response

Comment using Facebook(Author doesn't get notification)