469,317 Members | 1,900 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,317 developers. It's quick & easy.

Help with tricky "select all" problem

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.

Sep 22 '05 #1
3 2199
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...

at*****@comcast.net (Adam Toline) wrote in
<96*******************@216.196.97.136>:
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.


Sep 22 '05 #2
Adam Toline <at*****@comcast.net> wrote:
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"?


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
getElementsByName() and change only those boxes you're concerned with.

--
Christopher Benson-Manica | I *should* know what I'm talking about - if I
ataru(at)cyberspace.org | don't, I need to know. Flames welcome.
Sep 23 '05 #3
Adam Toline wrote:
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...

at*****@comcast.net (Adam Toline) wrote in
<96*******************@216.196.97.136>:

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.


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.toLowerCase()) {
el = el.parentNode;
}
if ('div' == el.nodeName.toLowerCase()){
var i = divArray.length;
while ( i-- ){
if ( el.id && divArray[i] == el.id ){
checkGroup( el, state );
} else if ( state ) {
checkGroup( document.getElementById(divArray[i]), !state );
}
}
}
}

// Sets all of the checkboxes inside el to state
function checkGroup (el, state)
{
var inputs = el.getElementsByTagName('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="buttonSet">
<div class="titleD">STYLE</div>
<span class="clickable" onclick="
doChecks(this, true);
"><b>Check all</b></span>&nbsp;/&nbsp;<span class="clickable"
onclick="doChecks(this, false);
"><b>None</b></span><br>
<input type="checkbox" name="Search_search">Alabaster
/ Faux Alabaster<br>
<input type="checkbox" name="Search_search">Architectural
/ Mission<br>
<input type="checkbox" name="Search_search">Art Deco
/ Craftsman / Retro<br>
<input type="checkbox" name="Search_search">Ceramic
/ Paintable / Porcelain<br>
</div>

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

<div id="set-3" class="buttonSet">
<div class="titleD">BRAND</div>
<span class="clickable" onclick="
doChecks(this, true);
"><b>Check all</b></span>&nbsp;/&nbsp;<span class="clickable"
onclick="doChecks(this, false);
"><b>None</b></span><br>
<input type="checkbox" name="Search_search">Justice Design Group<br>
<input type="checkbox" name="Search_search">Kichler Lighting<br>
<input type="checkbox" name="Search_search">LBL Lighting<br>
<input type="checkbox" name="Search_search">PLC Lighting<br>
</div>

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

</body></html>

--
Rob
Sep 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

23 posts views Thread by ian justice | last post: by
3 posts views Thread by Jason | last post: by
4 posts views Thread by bill salkin | last post: by
7 posts views Thread by php_mysql_beginer911 | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by harlem98 | last post: by
reply views Thread by harlem98 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.