Adam said:
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...
(e-mail address removed) (Adam Toline) wrote in
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
== el.id ){
checkGroup( el, state );
} else if ( state ) {
checkGroup( document.getElementById(divArray), !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.type ){
inputs.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>