Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

select all from a check list

Status
Not open for further replies.

SM777

Technical User
Joined
Mar 7, 2001
Messages
208
Location
GB
I have a form where I ask what kind of fruit. I have fields for apples, oranges, bananas. Rather than get the person to tick all boxes How do I have one box that if selected automatically selects all, or 'greys' out the individual boxes?

eg:

choose fruit:

_All _ Apples _Oranges _Bananas

So if you checked _All the others would be either filled in or 'greyed out'.

This is just a cosmetic thing to make the form look nice. If I didn't do it there would always be some dork that says "huh huh, you can select All and Oranges, huh huh".
 
Put this function in your head section:
Code:
function checkAll() {
   if (document.myform.allfruit.checked) {
      document.myform.apples.checked = true;
      document.myform.oranges.checked = true;
      document.myform.bananas.checked = true;
   } else {
      document.myform.apples.checked = false;
      document.myform.oranges.checked = false;
      document.myform.bananas.checked = false;
   }
}
</script>
Modify it to match your form name and checkbox names.

Then add
Code:
onClick=&quot;checkAll()&quot;
to your checkbox tag for all.
Tracy Dryden
tracy@bydisn.com

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.
 
Sorry, after I thought about it, that solution isn't quite complete. If you checked ALL and then unchecked Oranges, ALL would still be checked. Here's the full html for a test I did that handles that problem too:
Code:
<HTML>
<HEAD>
<TITLE>Test Check All</TITLE>
<script language=&quot;javascript&quot;>
function checkAll() {
   if (document.myform.allfruit.checked) {
      document.myform.apples.checked = true;
      document.myform.oranges.checked = true;
      document.myform.bananas.checked = true;
   } else {
      document.myform.apples.checked = false;
      document.myform.oranges.checked = false;
      document.myform.bananas.checked = false;
   }
}

function uncheckAllOpt(which) {
   if (!which.checked && document.myform.allfruit.checked) {
      document.myform.allfruit.checked = false;
   }
}
</script>
</HEAD>
<BODY>
<form name=&quot;myform&quot;>
<input type=&quot;checkbox&quot; name=&quot;apples&quot; onClick=&quot;uncheckAllOpt(this)&quot;> Apples<br>
<input type=&quot;checkbox&quot; name=&quot;oranges&quot; onClick=&quot;uncheckAllOpt(this)&quot;> Oranges<br>
<input type=&quot;checkbox&quot; name=&quot;bananas&quot; onClick=&quot;uncheckAllOpt(this)&quot;> Bananas<br>
<input type=&quot;checkbox&quot; name=&quot;allfruit&quot; onClick=&quot;checkAll()&quot;> ALL<br>
</BODY>
</HTML>
[code] Tracy Dryden
tracy@bydisn.com

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.
 
ahh, many thanks tracy. I'll give that ago.

Stephen
Welsh dragons prefer leek soup.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top