I have the following form:

<form action='search_tr.php?action=search' method='post'><a name='search'></a><h3>Training Resources</h3>
<p>
Please search by <u>either</u> category or keyword.<p>

<b>Search by category(s): </b>
<p>
<!-- start of table one -->
<table border='0'>
<tr>
<td width='320'><input type='checkbox' name='catSearch[ ]' value='::1::' id='cat0'> <label for='cat0'>Research Methods</label></td>
</tr>

<tr>
<td width='320'><input type='checkbox' name='catSearch[ ]' value='::2::' id='cat1'> <label for='cat1'>Software Packages</label></td>
</tr>

<tr>

<td width='320'><input type='checkbox' name='catSearch[ ]' value='::3::' id='cat2'> <label for='cat2'>Personal Development</label></td>
</tr></table>
<!-- end of table one -->
<p>
<hr>
<p>
<b>Search by keyword(s): </b>
<p>
<!-- start of table two -->
<table border='0'>
<tr>
<td width='320'><input type='checkbox' name='kwSearch[ ]' value='::1::' id='kw0'> <label for='kw0'>Web Design</label></td>
<td width='320'><input type='checkbox' name='kwSearch[ ]' value='::2::' id='kw1'> <label for='kw1'>Microsoft Office</label></td>
<td width='320'><input type='checkbox' name='kwSearch[ ]' value='::3::' id='kw2'> <label for='kw2'>Bibliographic Software</label></td>

</tr>

<tr>
<td width='320'><input type='checkbox' name='kwSearch[ ]' value='::4::' id='kw3'> <label for='kw3'>Statistical Software Packages</label></td>
<td width='320'><input type='checkbox' name='kwSearch[ ]' value='::5::' id='kw4'> <label for='kw4'>Software for Qualitative Analysis</label></td>
<td width='320'><input type='checkbox' name='kwSearch[ ]' value='::6::' id='kw5'> <label for='kw5'>Literature Searching</label></td>
</tr>

<tr>
<td width='320'><input type='checkbox' name='kwSearch[ ]' value='::7::' id='kw6'> <label for='kw6'>Systematic Reviews</label></td>

<td width='320'><input type='checkbox' name='kwSearch[ ]' value='::8::' id='kw7'> <label for='kw7'>Survey Design</label></td>
<td width='320'><input type='checkbox' name='kwSearch[ ]' value='::9::' id='kw8'> <label for='kw8'>Qualitative Methods</label></td>
</tr>

<tr>
<td width='320'><input type='checkbox' name='kwSearch[ ]' value='::10::' id='kw9'> <label for='kw9'>Quantitative Methods</label></td>
<td width='320'><input type='checkbox' name='kwSearch[ ]' value='::11::' id='kw10'> <label for='kw10'>Interviewing</label></td>
<td width='320'><input type='checkbox' name='kwSearch[ ]' value='::12::' id='kw11'> <label for='kw11'>Focus Groups</label></td>

</tr>

<tr>
<td width='320'><input type='checkbox' name='kwSearch[ ]' value='::13::' id='kw12'> <label for='kw12'>Cognitive</label></td>
<td width='320'><input type='checkbox' name='kwSearch[ ]' value='::14::' id='kw13'> <label for='kw13'>Statistical Analysis</label></td>
<td width='320'><input type='checkbox' name='kwSearch[ ]' value='::15::' id='kw14'> <label for='kw14'>Research Management</label></td>
</tr>

<tr>
<td width='320'><input type='checkbox' name='kwSearch[ ]' value='::16::' id='kw15'> <label for='kw15'>Appraisal</label></td>

<td width='320'><input type='checkbox' name='kwSearch[ ]' value='::17::' id='kw16'> <label for='kw16'>Recruitment</label></td>
<td width='320'><input type='checkbox' name='kwSearch[ ]' value='::18::' id='kw17'> <label for='kw17'>Equality</label></td>
</tr>

<tr>
<td width='320'><input type='checkbox' name='kwSearch[ ]' value='::19::' id='kw18'> <label for='kw18'>Budgets</label></td>
<td width='320'><input type='checkbox' name='kwSearch[ ]' value='::20::' id='kw19'> <label for='kw19'>Time Management</label></td>
<td width='320'><input type='checkbox' name='kwSearch[ ]' value='::21::' id='kw20'> <label for='kw20'>Presentation Skills</label></td>

</tr>

<tr>
<td width='320'><input type='checkbox' name='kwSearch[ ]' value='::22::' id='kw21'> <label for='kw21'>Assertiveness</label></td>
<td width='320'><input type='checkbox' name='kwSearch[ ]' value='::23::' id='kw22'> <label for='kw22'>Training the Trainer</label></td>
<td width='320'><input type='checkbox' name='kwSearch[ ]' value='::26::' id='kw23'> <label for='kw23'>Longitudinal</label></td>
</tr></table>

<!-- end of table two -->
<p>
<input type='submit' value='Search'></form>

which effectively has two blocks of checkboxes, each in their own table.

How easy / possible is it that when I check a box in table one, all of the the boxes in table two that are checked clear, and vice versa, when any in table two are checked, table one is cleared?

Many thanks,
Ed Ludlow

Here is the basic idea to check all of the checkboxes inside a table with the id of tableId.


var elems = document.getElementById("tableId").getElementsByTagName("input");

var lngth = elems.length;
for(var i=0;i<elems.length;i++){
if(elems[i].type=="checkbox")elems[i].checked = true;
}


Eric

It is very poor practice to use tables for "layout." Use CSS for layout.

Tables are for tabular data, not for positioning elements.

In either case, it's considered good practice to indent HTML elements.



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

function clearGroup(nGroup){

for (i=0; i<nGroup.length; i++)
{
if (nGroup[i].checked)
{
nGroup[i].checked = false;
}
}
}

function init(){

var nCategory = document.getElementsByName('catSearch[ ]');
var nKeyword = document.getElementsByName('kwSearch[ ]');
for (i=0; i<nCategory.length; i++)
{
nCategory[i].onclick = function(){clearGroup(nKeyword)}
}
for (i=0; i<nKeyword.length; i++)
{
nKeyword[i].onclick = function(){clearGroup(nCategory)}
}
}

onload = init;

</script>
<style type="text/css">

body {background-color: #eae3c6; margin-top: 60px;}
form {width: 620px; margin: auto; font-family: times; font-size: 12pt;}
fieldset {width: 620px; background-color: #f0fff0; border: 1px solid #87ceeb;}
legend {font-family: times; font-size: 14pt; color: #00008b; background-color: #87ceeb; padding-left: 3px; padding-right: 3px; margin-bottom: 5px;}
.submitBtn {font-family: tahoma; font-size: 10pt; display: block; margin-left: auto; margin-right: auto; margin-top: 5px; margin-bottom: 5px;}

</style>
</head>
<body>
<form action='search_tr.php?action=search' method='post'>
<a name='search' id="search"></a>
<h3>
Training Resources
</h3>
<p>
Please search by <u>either</u> category or keyword.
</p>

<p>
<b>Search by category(s):</b>
</p>
<p>
<!-- start of table one -->
</p>
<table border='0'>
<tr>

<td width='320'>
<input type='checkbox' name='catSearch[ ]' value='::1::' id='cat0'> <label for='cat0'>Research Methods</label>
</td>
</tr>
<tr>
<td width='320'>
<input type='checkbox' name='catSearch[ ]' value='::2::' id='cat1'> <label for='cat1'>Software Packages</label>

</td>
</tr>
<tr>
<td width='320'>
<input type='checkbox' name='catSearch[ ]' value='::3::' id='cat2'> <label for='cat2'>Personal Development</label>
</td>
</tr>
</table><!-- end of table one -->

<hr>
<p>
<b>Search by keyword(s):</b>
</p>
<p>
<!-- start of table two -->
</p>
<table border='0'>

<tr>
<td width='320'>
<input type='checkbox' name='kwSearch[ ]' value='::1::' id='kw0'> <label for='kw0'>Web Design</label>
</td>
<td width='320'>
<input type='checkbox' name='kwSearch[ ]' value='::2::' id='kw1'> <label for='kw1'>Microsoft Office</label>
</td>

<td width='320'>
<input type='checkbox' name='kwSearch[ ]' value='::3::' id='kw2'> <label for='kw2'>Bibliographic Software</label>
</td>
</tr>
<tr>
<td width='320'>
<input type='checkbox' name='kwSearch[ ]' value='::4::' id='kw3'> <label for='kw3'>Statistical Software
Packages</label>

</td>
<td width='320'>
<input type='checkbox' name='kwSearch[ ]' value='::5::' id='kw4'> <label for='kw4'>Software for Qualitative
Analysis</label>
</td>
<td width='320'>
<input type='checkbox' name='kwSearch[ ]' value='::6::' id='kw5'> <label for='kw5'>Literature Searching</label>
</td>

</tr>
<tr>
<td width='320'>
<input type='checkbox' name='kwSearch[ ]' value='::7::' id='kw6'> <label for='kw6'>Systematic Reviews</label>
</td>
<td width='320'>
<input type='checkbox' name='kwSearch[ ]' value='::8::' id='kw7'> <label for='kw7'>Survey Design</label>

</td>
<td width='320'>
<input type='checkbox' name='kwSearch[ ]' value='::9::' id='kw8'> <label for='kw8'>Qualitative Methods</label>
</td>
</tr>
<tr>
<td width='320'>
<input type='checkbox' name='kwSearch[ ]' value='::10::' id='kw9'> <label for='kw9'>Quantitative Methods</label>

</td>
<td width='320'>
<input type='checkbox' name='kwSearch[ ]' value='::11::' id='kw10'> <label for='kw10'>Interviewing</label>
</td>
<td width='320'>
<input type='checkbox' name='kwSearch[ ]' value='::12::' id='kw11'> <label for='kw11'>Focus Groups</label>
</td>

</tr>
<tr>
<td width='320'>
<input type='checkbox' name='kwSearch[ ]' value='::13::' id='kw12'> <label for='kw12'>Cognitive</label>
</td>
<td width='320'>
<input type='checkbox' name='kwSearch[ ]' value='::14::' id='kw13'> <label for='kw13'>Statistical Analysis</label>

</td>
<td width='320'>
<input type='checkbox' name='kwSearch[ ]' value='::15::' id='kw14'> <label for='kw14'>Research Management</label>
</td>
</tr>
<tr>
<td width='320'>
<input type='checkbox' name='kwSearch[ ]' value='::16::' id='kw15'> <label for='kw15'>Appraisal</label>

</td>
<td width='320'>
<input type='checkbox' name='kwSearch[ ]' value='::17::' id='kw16'> <label for='kw16'>Recruitment</label>
</td>
<td width='320'>
<input type='checkbox' name='kwSearch[ ]' value='::18::' id='kw17'> <label for='kw17'>Equality</label>
</td>

</tr>
<tr>
<td width='320'>
<input type='checkbox' name='kwSearch[ ]' value='::19::' id='kw18'> <label for='kw18'>Budgets</label>
</td>
<td width='320'>
<input type='checkbox' name='kwSearch[ ]' value='::20::' id='kw19'> <label for='kw19'>Time Management</label>

</td>
<td width='320'>
<input type='checkbox' name='kwSearch[ ]' value='::21::' id='kw20'> <label for='kw20'>Presentation Skills</label>
</td>
</tr>
<tr>
<td width='320'>
<input type='checkbox' name='kwSearch[ ]' value='::22::' id='kw21'> <label for='kw21'>Assertiveness</label>

</td>
<td width='320'>
<input type='checkbox' name='kwSearch[ ]' value='::23::' id='kw22'> <label for='kw22'>Training the Trainer</label>
</td>
<td width='320'>
<input type='checkbox' name='kwSearch[ ]' value='::26::' id='kw23'> <label for='kw23'>Longitudinal</label>
</td>

</tr>
</table><!-- end of table two -->
<input type='submit' name="submit" class="submitBtn" value='Search'>
</form>
</body>
</html>

Many thanks all. Cranford that is perfect for what I want, thank you.

Yes, I'm aware tables shouldn't be used for layout, however in this case every cell and row (and therefore form element) is dynamically produced through PHP depending on user input before the search is conducted, so tables are the most functional way for me to cope with this, especially as it's for a CMS administration area, so "functional" is more important than presentation.

Many thanks once again,
Ed