Check One Check All – Javascript

Hello Friends …..

You have seen in Yahoo,Gmail or in any Mail Service that they provide you to select all mail facility by check only one checkbox or click on link as Select All/Deselect All.

When you click on that lick or check that checkbox , your all mails on that page will be selected.

You think that how it does ?

This is done by Javascript .

In this Post, iwill give you that javascript which is used for select all purpose.

Here I give you whole code of that javascript with HTML form. In this coad there is some PHP code also.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Untitled Document</title>
<script type=”text/javascript” language=”javascript”>
function checkAll()
{
var i;

for(i=0;i<document.frm.elements.length; i++)
{
var elm  = document.frm.elements[i];
if(elm.type == “checkbox” && elm.name != “chkCheckAll” )
{
elm.checked =document.frm.chkCheckAll.checked;
}
}
}
function check()
{
var i;
var flag;
flag=1;
for(i=0;i<document.frm.elements.length; i++)
{
var elm  = document.frm.elements[i];
if(elm.type == “checkbox” && elm.name != “chkCheckAll” )
{
if(elm.checked==false)
{
flag=0;
}
}
}
if(flag==1)
{
document.frm.chkCheckAll.checked=true;
}
else
{
document.frm.chkCheckAll.checked=false;
}
}
</script>
</head>

<body>
<form id=”frm” name=”frm”>
<table width=”90%” border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″>

<tr>
<td align=”left” valign=”top”>&nbsp;</td>
</tr>
<tr>
<td align=”left” valign=”top”><table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>

</table></td>
</tr>
<tr>
<td align=”left” valign=”top”>&nbsp;</td>
</tr>
<tr>
<td align=”left” valign=”top” class=”tableBgWhite”><table width=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″ class=”pagination”><tr><td align=”right” valign=”top”><table width=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″ class=”pagination”>

</table></td>
</tr>
</table></td>
</tr>
<tr>
<td align=”left” valign=”top” class=”tableBgWhite”><table width=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″ class=”tableListingBdr”>
<tr>
<th width=”4%” height=”20″ align=”left” valign=”top”><INPUT type=”checkbox” id=”chkCheckAll” name=”chkCheckAll” onClick=”javascript:checkAll();” align=”middle”>Select All/Deselect All</th>
</tr>

<?php for ($i=0 ; $i < 5 ; $i++)
{
?>
<tr >
<td align=”left” valign=”top”><input id=”list” type=”checkbox” name=”check[]” value=”<?php echo $i; ?>” onClick=”Javascript:return check();” /></td>
</tr>

<?php }?>
</table></td>
</tr>
<tr>
<td align=”right” valign=”top” class=”tableBgWhite”><table width=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″ class=”pagination”>

</table></td>
</tr>

<tr>
<td align=”left” valign=”top”>&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>

Just copy this code ,Paste it and saved by example.php in your PHP directory.

Then Run this page. If you want to see Demo then Click Here

If you have any query or question then please comment me. In next post I will give you code about delete those records which are selected by this checkbox. All these data deleted by one click.

Comments are closed.