Select All/Deselect All button
Sometimes it's nice NOT to bulk up a site with too many buttons, so here is a button that has two functions: to select all, and then to deselect all.
Why would you do something like this? Well, many of the pages I develop are web implementations existing paper forms. In many cases the person is requested to check of a variety of options, and most times they simply select all. If you watch someone fill out a form manually (pen and paper) they can 'zip-zip-zip' knock off a dozen radio buttons in a second or two. BUT watch someone do the same on a web form and it takes much more time. They get frustrated, but this can easily be remedied by a simple 'select all' function. Also, in cases where the user requires 9 of 10 options, it's quicker to select all, then deselect the one option they don't want. However, if they choose all by mistake, they need a way to back out without resetting the entire form, or manually deselecting all. This javascript fulfills the requirement of giving full functionality to the user without having to provide multiple buttons.
The button itself can easily be replaced by a gif, radiobutton or checkbox. I recognize that this is primarily for ColdFusion, but it's hard to develop a good CF site without using client-side javascript.
Example HTML/CFML code: Code:
<html>
<head>
<title>one button - two actions</title>
</head>
<body>
<form>
A<input type="checkbox" name="A">
B<input type="checkbox" name="B">
C<input type="checkbox" name="C">
D<input type="checkbox" name="D">
E<input type="checkbox" name="E">
F<input type="checkbox" name="F">
G<input type="checkbox" name="G">
H<input type="checkbox" name="H">
I<input type="checkbox" name="I">
<font color="White">--------</font>
<input type="button" name="allNone" value="check / uncheck all" onclick="selectAll()">
</form>
<script language="JavaScript1.2">
selectVal = true;
function selectAll()
{
if(selectVal == true)
{
value = true;
selectVal = false;
} else {
value = false;
selectVal = true;
}
document.forms[0].A.checked = value;
document.forms[0].B.checked = value;
document.forms[0].C.checked = value;
document.forms[0].D.checked = value;
document.forms[0].E.checked = value;
document.forms[0].F.checked = value;
document.forms[0].G.checked = value;
document.forms[0].H.checked = value;
document.forms[0].I.checked = value;
}
</script>
</body>
</html>