In this jquery tutorial you will learn how to check/uncheck all checkboxes using jquery. I have already written a post about how to check/uncheck all checkboxes using javascript and c#.
But being a software engineer, we should always follow the latest technology as well. So that's why I have written this tutorial in jquery. So let's have a look over the home.html
But being a software engineer, we should always follow the latest technology as well. So that's why I have written this tutorial in jquery. So let's have a look over the home.html
Check/Uncheck All Checkboxes using jquery
<html>
<head>
<title>Check/Uncheck All Checkboxes using jquery </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"
charset="utf-8"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$("#checkall").live('click',function(event){
$('input:checkbox:not(#checkall)').attr('checked',this.checked);
});
$('input:checkbox:not(#checkall)').live('click',function(event)
{
if($("#checkall").attr('checked') == true && this.checked == false)
$("#checkall").attr('checked',false);
if(this.checked == true)
CheckSelectAll();
});
function CheckSelectAll()
{
var flag = true;
$('input:checkbox:not(#checkall)').each(function() {
if(this.checked == false)
flag = false;
});
$("#checkall").attr('checked',flag);
}
});
</script>
</head>
<body>
<table width="50%" cellspacing="0" border="0" align="left" id="tblDisplay" cellpading="0"
style="font-family: verdana; font-size: 10px;">
<thead>
<tr id="chkrow">
<th>
<input type="checkbox" id="checkall" />
</th>
<th>
Sr.
</th>
<th style="text-align: left;">
First Name
</th>
<th style="text-align: left;">
Last Name
</th>
<th>
Country
</th>
<th>
Marital Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="1" />
</td>
<td style="text-align: center;">
1
</td>
<td style="text-align: left;">
Adeel
</td>
<td style="text-align: left;">
Fakhar
</td>
<td style="text-align: center;">
Pakistan
</td>
<td style="text-align: center;">
Single
</td>
</tr>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="2" />
</td>
<td style="text-align: center;">
2
</td>
<td style="text-align: left;">
Omer
</td>
<td style="text-align: left;">
Fakhar
</td>
<td style="text-align: center;">
Pakistan
</td>
<td style="text-align: center;">
Single
</td>
</tr>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="3" />
</td>
<td style="text-align: center;">
3
</td>
<td style="text-align: left;">
Umer
</td>
<td style="text-align: left;">
Mukhtar
</td>
<td style="text-align: center;">
Pakistan
</td>
<td style="text-align: center;">
Single
</td>
</tr>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="4" />
</td>
<td style="text-align: center;">
4
</td>
<td style="text-align: left;">
Mark
</td>
<td style="text-align: left;">
Waugh
</td>
<td style="text-align: center;">
Australia
</td>
<td style="text-align: center;">
Married
</td>
</tr>
</tbody>
</table>
</body>
</html>
Explaination of Code:-
I have placed a checkbox of id "checkall" in the first row, the header row of the table. Now by clicking this checkbox, the process of check/uncheck all checkboxes will be performed.
Now let's understand the jquery code.
$("#checkall").live('click',function(event){
$('input:checkbox:not(#checkall)').attr('checked',this.checked);
});
The above code snippet will performed the thing that you want to do. It will bind the click event to the "checkall" checkbox and will check/uncheck all the checkboxes other than itself.
$('input:checkbox:not(#checkall)').live('click',function(event)
The above code will bind the click event to all of the checkboxes other then the checkbox of id "checkall".
Note: - Always use the click event with live function, live function can bind the click event to the dynamic elements (the elements that are generated at runtime) as well. It will not create any problem if data is coming from database i.e.; dynamic rows are being added to the table.
If you write the same code like this
$("#checkall").click(function(){
$('input:checkbox:not(#checkall)').attr('checked',this.checked);
});
Then if you are getting the table rows from database with checkboxes then the click event will not be bind with the checkboxes of dynamic rows. So always use the click event with live function.
if($("#checkall").attr('checked') == true && this.checked == false)
$("#checkall").attr('checked',false);
Now let's consider you have checked all the checkboxes. Now this above code snippet will uncheck the header checkbox “checkall” when any of the checkbox placed in the body of the table will be unchecked. The checkbox "checkall"
should be only checked when all the other checkboxes are checked and when any one of the checkbox will be unchecked the "checkall" checkbox should be unchecked.
if(this.checked == true)
CheckSelectAll();
function CheckSelectAll()
{
var flag = true;
$('input:checkbox:not(#checkall)').each(function() {
if(this.checked == false)
flag = false;
});
$("#checkall").attr('checked',flag);
}
Now when you checked any of the checkbox placed in the <tbody> of the table then the above code snippet will check whether all the checkboxes are checked or not through built-in each() of jquery that will loop through all the checkboxes placed in the <tbody> and will try to find any of the checkbox that is unchecked, if it finds any unchecked checkbox then it will set the variable flag to false and the "checkall" checkbox(the checkbox placed in the <thead> row of the table) will be unchecked
But when it will not find any of the checkbox unchecked then it will checked the "checkall" checkbox.
Note: - It is not compulsory for you to use the <thead> and <tbody> in the <table>. I just use them to make the table structure better and understandable.
So this is the way to check/uncheck all checkboxes using jquery.
0 comments:
Post a Comment