Help with tricky "select all" problem

[Adam Toline]

In reference to the following:

http://www.bellecose.com/form.htm

At the top of each column there is a box for "All".

When one is checked I need to check all of (and only) those boxes
underneath.

Now, the rub here is that every checkbox on the page (except the "All"s)
are coded like this:

<input type="checkbox" name="search" value="Rattan">

Well, they don't all have the value "Rattan" obviously. That value changes
from box to box. What does not change is the name "search".

This is because every checkbox represents a keyword search in the form and
must be named "search" in order to have its value included in the search
process. Changing that is not an option.

I know how to do this to check ALL the boxes on the whole page by name.
But that won't work for this. How can I differentiate between just the
boxes below a particular "All"?

Can it be done by putting a particular columns checkboxes in their own
nested table and set its id and work off that? My searching for answers
hasn't yielded much just yet. Any help is appreciated.

[Adam Toline]

Re: Help with tricky &quot;select all&quot; problem

Oh also I need the All box to toggle on / off the others with check /
uncheck. In the last few minutes I have found some archive help thats
getting me there...

atoline@comcast .net (Adam Toline) wrote in
<96D9A1A27karlc sueduco@216.196 .97.136>:
[color=blue]
>In reference to the following:
>
>http://www.bellecose.com/form.htm
>
>At the top of each column there is a box for "All".
>
>When one is checked I need to check all of (and only) those boxes
>underneath.
>
>Now, the rub here is that every checkbox on the page (except the "All"s)
>are coded like this:
>
><input type="checkbox" name="search" value="Rattan">
>
>Well, they don't all have the value "Rattan" obviously. That value
>changes from box to box. What does not change is the name "search".
>
>This is because every checkbox represents a keyword search in the form
>and must be named "search" in order to have its value included in the
>search process. Changing that is not an option.
>
>I know how to do this to check ALL the boxes on the whole page by name.
>But that won't work for this. How can I differentiate between just the
>boxes below a particular "All"?
>
>Can it be done by putting a particular columns checkboxes in their own
>nested table and set its id and work off that? My searching for answers
>hasn't yielded much just yet. Any help is appreciated.
>
>[/color]

[Christopher Benson-Manica]

Re: Help with tricky &quot;select all&quot; problem

Adam Toline <atoline@comcas t.net> wrote:
[color=blue]
> I know how to do this to check ALL the boxes on the whole page by name.
> But that won't work for this. How can I differentiate between just the
> boxes below a particular "All"?[/color]

At least one (possibly poor) option is to give them all unique id's of
the form 'type-of-box'+number. You can then check the id of each
element when you loop through the array you obtain from
getElementsByNa me() and change only those boxes you're concerned with.

--
Christopher Benson-Manica | I *should* know what I'm talking about - if I
ataru(at)cybers pace.org | don't, I need to know. Flames welcome.

[RobG]

Re: Help with tricky &quot;select all&quot; problem

Adam Toline wrote:[color=blue]
> Oh also I need the All box to toggle on / off the others with check /
> uncheck. In the last few minutes I have found some archive help thats
> getting me there...
>
> atoline@comcast .net (Adam Toline) wrote in
> <96D9A1A27karlc sueduco@216.196 .97.136>:
>
>[color=green]
>>In reference to the following:
>>
>>http://www.bellecose.com/form.htm
>>
>>At the top of each column there is a box for "All".
>>
>>When one is checked I need to check all of (and only) those boxes
>>underneath.
>>
>>Now, the rub here is that every checkbox on the page (except the "All"s)
>>are coded like this:
>>
>><input type="checkbox" name="search" value="Rattan">
>>
>>Well, they don't all have the value "Rattan" obviously. That value
>>changes from box to box. What does not change is the name "search".
>>
>>This is because every checkbox represents a keyword search in the form
>>and must be named "search" in order to have its value included in the
>>search process. Changing that is not an option.
>>
>>I know how to do this to check ALL the boxes on the whole page by name.
>>But that won't work for this. How can I differentiate between just the
>>boxes below a particular "All"?
>>
>>Can it be done by putting a particular columns checkboxes in their own
>>nested table and set its id and work off that? My searching for answers
>>hasn't yielded much just yet. Any help is appreciated.[/color][/color]

There are many ways to do this, the basic methods are using divs to
create sets then display them as columns. The other is to use a table.

Your page fits both cases, take your pick - using divs is simpler from a
scripting standpoint but you may find learning the required CSS too
much. Using a table makes it a bit tougher, but not much.

I don't think you should use a checkbox for selecting all, nor should
checking 'none' cause the other sets to be cleared. The script below
clears the other sets only when 'all' is checked.

I've used divs and CSS to do the job, if you want to use a table then
you could work out which column you are in, then create sets of
checkboxes based on the columns. The advantage is that the design
floats, so if you reduce the window width the sets of checkboxes
re-align - try it and see.

You could also create arrays of references to the checkboxes onload,
then just loop through the arrays checking/unchecking as appropriate.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Demo</title>

<style type="text/css">

..titleD {
font-family: verdana, sans-serif;
font-size: 110%;
font-weight: bold;
color: white;
background-color: #336699;
text-align: center;
}
..buttonSet {
font-family: arial, sans-serif;
font-size: 75%;
color: #336699;
background-color: #f8fafc;
float: left;
border-right: 1px solid #336699;
width: 15em;
}

..clickable {
cursor: pointer;
padding-left: 5px;
}

</style>

<script type="text/javascript">

// Array of button set div ids
var divArray = ['set-1','set-2','set-3'];

// Sets the checked status of all the checkboxes in a group to state
// If state is false, other sets are not modified.
// If state is true, other sets are unchecked
function doChecks( el, state )
{
while (el.parentNode && 'div' != el.nodeName.toL owerCase()) {
el = el.parentNode;
}
if ('div' == el.nodeName.toL owerCase()){
var i = divArray.length ;
while ( i-- ){
if ( el.id && divArray[i] == el.id ){
checkGroup( el, state );
} else if ( state ) {
checkGroup( document.getEle mentById(divArr ay[i]), !state );
}
}
}
}

// Sets all of the checkboxes inside el to state
function checkGroup (el, state)
{
var inputs = el.getElementsB yTagName('input ');
var i = inputs.length;
while ( i-- ) {
if ( 'checkbox' == inputs[i].type ){
inputs[i].checked = state;
}
}
}

</script>
</head>
<body>

<div id="msg"></div>

<form action="">
<div>
<div id="set-1" class="buttonSe t">
<div class="titleD"> STYLE</div>
<span class="clickabl e" onclick="
doChecks(this, true);
"><b>Check all</b></span>&nbsp;/&nbsp;<span class="clickabl e"
onclick="doChec ks(this, false);
"><b>None</b></span><br>
<input type="checkbox" name="Search_se arch">Alabaster
/ Faux Alabaster<br>
<input type="checkbox" name="Search_se arch">Architect ural
/ Mission<br>
<input type="checkbox" name="Search_se arch">Art Deco
/ Craftsman / Retro<br>
<input type="checkbox" name="Search_se arch">Ceramic
/ Paintable / Porcelain<br>
</div>

<div id="set-2" class="buttonSe t">
<div class="titleD"> FINISH</div>
<span class="clickabl e" onclick="
doChecks(this, true);
"><b>Check all</b></span>&nbsp;/&nbsp;<span class="clickabl e"
onclick="doChec ks(this, false);
"><b>None</b></span><br>
<input type="checkbox" name="Search_se arch">Antique
/ Satin Brass<br>
<input type="checkbox" name="Search_se arch">Beige
/ White / Ivory<br>
<input type="checkbox" name="Search_se arch">Black
/ Iron<br>
<input type="checkbox" name="Search_se arch">Bronze
/ Rust<br>
</div>

<div id="set-3" class="buttonSe t">
<div class="titleD"> BRAND</div>
<span class="clickabl e" onclick="
doChecks(this, true);
"><b>Check all</b></span>&nbsp;/&nbsp;<span class="clickabl e"
onclick="doChec ks(this, false);
"><b>None</b></span><br>
<input type="checkbox" name="Search_se arch">Justice Design Group<br>
<input type="checkbox" name="Search_se arch">Kichler Lighting<br>
<input type="checkbox" name="Search_se arch">LBL Lighting<br>
<input type="checkbox" name="Search_se arch">PLC Lighting<br>
</div>

<input type="submit" value="Search for products"
style="float: left; clear: left; margin-top: 15px;">
</div>
</form>

</body></html>



--
Rob