PDA

View Full Version : checking all checkboxes

jscript_newbie
09-17-2002, 11:43 AM
Hi...

I want to change a "Select All" link to "De-select All" upon checking all checkboxes and vice versa. Currently, when i click on select all, all checkboxes are checked and link changes to deselect all and when i click on deselect all, all checkboxes are unchecked and the link reverts back to select all. Now, i want to do the same the opposite way, that is, when i've checked all checkboxes, the link changes to deselect all and vice versa.

The number of checkboxes is dynamic.

My code is as follows:


*********************************************************************
<html>
<head>
<script language="JavaScript">
var cond = 0;
var selected = 1;

function lnkChkAll(frm)
{
var e = document.forms[frm].elements;

/* if there're form elements */
if ( e )
{
/* loop over the form elements */
for ( i=0; i<e.length; i++ )
{
if ( (e[i].type == 'checkbox') )
{
if ( cond != 0 )
{
e[i].checked = selected;
}
else
{
e[i].checked = selected;
}
}
}
}

for ( var j = 0; j < document.links.length; j++ )
{
/* if link exists */
if ( (document.links[j].href.indexOf(frm) != -1) && (document.links[j].href.indexOf('lnkChkAll') != -1) )
{
if ( selected == 1 )
{
document.links[j].href = "javascript: lnkChkAll('" + frm + "')";
document.links[j].innerText = "De-select All";
}
else
{
document.links[j].href = "javascript: lnkChkAll('" + frm + "')";
document.links[j].innerText = "Select All";
}
}
}

if ( selected == 1 )
{
selected = 0;
cond = 1;
}
else
{
selected = 1;
cond = 0;
}
}

</script>
</head>
<body>
<center>
<form name="myform" action="" method="post">
<table>
<tr>
<td align="center"><a href="javascript:lnkChkAll('myform')">Select All</a></td>
</tr>
<tr>
<td align="center">
<b>Your Favorite Scripts & Languages</b><br>
<input type="checkbox" name="list1" value="1">Java<br>
<input type="checkbox" name="list2" value="2">JavaScript<br>
<input type="checkbox" name="list3" value="3">Coldfusion<br>
<input type="checkbox" name="list4" value="4">HTML<br>
<input type="checkbox" name="list5" value="5">SQL <br> <br>
<input type="button" value="Select All" onClick="this.value=btnChkAll(this.form.list)">
</td>
</tr>
</table>
</form>
</center>
</body>
</html>


*********************************************************************
Can someone pls help?

Thanks!!
requestcode
09-17-2002, 02:23 PM
Someont may come up with a better way, but this is what i have:
<html>
<head>
<script language="JavaScript">
var cond = 0;
function lnkChkAll(tdid,frmname)
{
frmobj = document.forms[frmname];
elmlen=frmobj.length
for(i=0;i<elmlen;i++)
{
if(frmobj.elements[i].type=="checkbox"&&cond==0)
{frmobj.elements[i].checked=true}
else
{
if(frmobj.elements[i].type=="checkbox")
{frmobj.elements[i].checked=false}
}
}

if(cond==0)
{
document.getElementById(tdid).innerHTML="<a href=\"javascript:lnkChkAll('chktd','myform')\">Deselect All</a>"
cond=1
}
else
{
document.getElementById(tdid).innerHTML="<a href=\"javascript:lnkChkAll('chktd','myform')\">Select All</a>"
cond=0
}
}
function chglnk(tdid,fobj)
{
elmlen=fobj.length
ckcount=0
ckbcount=0
for(i=0;i<elmlen;i++)
{
if(fobj.elements[i].type=="checkbox")
{ckcount++}
}
for(i=0;i<elmlen;i++)
{
if(fobj.elements[i].type=="checkbox"&&fobj.elements[i].checked)
{ckbcount++}
}
if(ckbcount==ckcount)
{
cond=1
document.getElementById(tdid).innerHTML="<a href=\"javascript:lnkChkAll('chktd','myform')\">Deselect All</a>"
}
else
{
if(ckbcount==0)
{
cond=0
document.getElementById(tdid).innerHTML="<a href=\"javascript:lnkChkAll('chktd','myform')\">Select All</a>"
}
}
}

</script>
</head>
<body>
<center>
<form name="myform" action="" method="post">
<table>
<tr>
<td align="center">
<b>Your Favorite Scripts & Languages</b><br>
<input type="checkbox" name="list1" value="1" onClick="chglnk('chktd',this.form)">Java<br>
<input type="checkbox" name="list2" value="2" onClick="chglnk('chktd',this.form)">JavaScript<br>
<input type="checkbox" name="list3" value="3" onClick="chglnk('chktd',this.form)">Coldfusion<br>
<input type="checkbox" name="list4" value="4" onClick="chglnk('chktd'this.form)">HTML<br>
<input type="checkbox" name="list5" value="5" onClick="chglnk('chktd',this.form)">SQL <br> <br>
</td>
</tr>
<tr>
<td id="chktd" align="center"><a href="javascript:lnkChkAll('chktd','myform')">Select All</a></td>
</tr>
</table>
</form>
</center>
</body>
</html>

I think that is what you want.
jscript_newbie
09-18-2002, 01:14 AM
thx! :)