select all from a check list

SM777 · May 23, 2001

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".

tsdragon · May 23, 2001

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.

tsdragon · May 23, 2001

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.

SM777 · May 24, 2001

ahh, many thanks tracy. I'll give that ago.

Stephen
Welsh dragons prefer leek soup.

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!

select all from a check list

SM777

Technical User

tsdragon

Programmer

tsdragon

Programmer

SM777

Technical User

Similar threads

Part and Inventory Search

Sponsor