Populating Check All Checkboxes Functionality using Javascript & JQuery

At time are you stuck with doing Check All functionality for your Application?

Here is How you can do it in quick manner. This Tutorial will guide you How to Achieve Check All Checkboxes by checking a single Check box.

Here is an Example Instance. In the following Page I want to check All the Check Boxes Once If Check the Top most Checkbox at the Header section.


Hmm In the Above case, We can Attain the task by simple Javascript or Jquery or Any other Javascript Frameworks.

For Now Lets See in Simple Javascript as well as JQuery

Here is the Explanation How easy we can do it in JQuery

<fieldset >
<legend>Choose  the Fruits you like </legend>
<input type="checkbox" name="select_all"  id="select_all" />  
Choose All Fruits
<br/>
<br/>
 
<input type="checkbox" name="fruit"   value="apple" />  
Apple 
<input type="checkbox" name="fruit"   value="mango"  />  Mango
<input type="checkbox" name="fruit"   value="grapes"   />  Grapes
<input type="checkbox" name="fruit"   value="melon"   />  Melon
 
</fieldset>

Now, Here comes the Javascript code using JQuery. Thanks to JQuery for proving xpath finding of the Elements which makes the code so simple

1.we need to populate for the Click event of the select_all Check box
2. Capture the Check status of the select_all check box
3. Traverse through each checkbox of Fruit and assign the select_all check status
4. DONE

Practically

$("#select_all").click(function(){
       var status= this.checked;
       $("input[name=fruit]").each(function (){
	      this.checked=status;			
               });	
});

That was the JQuery 1.3.2 Version Code, What if you are using Older Version i.e JQuery 1.2 ??

For you Here is the Change simply add the @ before name=fruit
i.e $(“input[@name=fruit]“).each()

@ is deprecated from the later versions of JQuery 1.2 So, All the best

That was the JQuery Version. When it Comes to Plain Javascript Functionality The Steps are similar excepts Few changes

<fieldset style="width:240px;">
<legend>Choose  the Fruits you like </legend>
<input type="checkbox" name="select_all"  id="select_all"  onlclick="selectall(this,fruit)" />  
Choose All Fruits
<br/>
<br/>
 
<input type="checkbox" name="fruit"   value="apple" />  
Apple 
<input type="checkbox" name="fruit"   value="mango"  />  Mango
<input type="checkbox" name="fruit"   value="grapes"   />  Grapes
<input type="checkbox" name="fruit"   value="melon"   />  Melon
 
</fieldset>

Here is the Javascript Version

function selectall(x,y)
{
   var  status=x.checked;
    var  arr= document.getElementsByName(y);
for(i=0;i<arr.length;i++)
{
 arr[i].checked=status;
}
 
}

Now Execute the Page. Check the Topmost Checkbox Hurrayyyyy

Happy Coding !!

Written by : adrevol
( Treats Given : 35 Treats Attended : )