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> / <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> / <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> / <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
