checkbox groups in single form with select all checkbox

hi,

This is the code I have so far. I would like to make the 'Select all' checkboxes only select all of the checkboxes in its group. And then deselect when it's unchecked.

I've had a good look around and couldn't find how to make this work with groups on the page.

Would be great if anyone knows of any script here that might be able to help.

thanks,

jo

This is an example of how I need it to work:
http://www.textit.com.au/checkboxform.cfm

and this is the code:

<script>
function toggle(theDiv) {
var elem = document.getElementById(theDiv);
elem.style.display = (elem.style.display == "none")?"":"none";
}
//-->
</script>


<form action="checkboxForm.cfm" method="post">
<!---display group name--->
<a href="#" class="bodyItemSmall" onclick="toggle('group1');return false;">Group 1</a><br>

<div id="group1" style="display: none;">
<!---get the group here--->
<table width="100%" border="0" cellspacing="0" cellpadding="2" bgcolor="#CCCCCC">
<tr>
<td><input type="checkbox" name="selectAll" value="checkbox"> Select all
</td>
</tr>
</table>
<!---display the group here--->
<input type="checkbox" name="contactID" value="1">firstName lastName<br>
<input type="checkbox" name="contactID" value="2">firstName lastName<br>
<input type="checkbox" name="contactID" value="3">firstName lastName<br>
</div>

<!---display group name--->
<a href="#" class="bodyItemSmall" onclick="toggle('group2');return false;">Group 2</a>

<div id="group2" style="display: none;">
<!---get the group here--->
<table width="100%" border="0" cellspacing="0" cellpadding="2" bgcolor="#CCCCCC">
<tr>
<td><input type="checkbox" name="selectAll" value="checkbox"> Select all
</td>
</tr>
</table>
<!---display the group here--->
<input type="checkbox" name="contactID" value="1">firstName lastName<br>
<input type="checkbox" name="contactID" value="6">firstName lastName<br>
<input type="checkbox" name="contactID" value="8">firstName lastName<br>
</div>
</form>

while I look at your code see

http://www.vicsjavascripts.org.uk/FormCompendium/FormCompendium.htm#f5




...........
function CkAllNone(obj,id){
var tbs=document.getElementById(id).getElementsByTagName('INPUT');
for (var zxc0=0;zxc0<tbs.length;zxc0++){
tbs[zxc0].checked=obj.checked;
}
}
//-->
</script>


<form action="checkboxForm.cfm" method="post">
<!---display group name--->
<a href="#" class="bodyItemSmall" onclick="toggle('group1');return false;">Group 1</a><br>

<div id="group1" style="display: none;">
<!---get the group here--->
<table width="100%" border="0" cellspacing="0" cellpadding="2" bgcolor="#CCCCCC">
<tr>
<td><input type="checkbox" name="selectAll" value="checkbox" onclick="CkAllNone(this,'group1');" > Select all
</td>
</tr>
</table>
<!---display the group here--->
<input type="checkbox" name="contactID" value="1">firstName lastName<br>
<input type="checkbox" name="contactID" value="2">firstName lastName<br>
<input type="checkbox" name="contactID" value="3">firstName lastName<br>
</div>
...............

hi Vic,

lol. I got the reply-to-post email and was in such a rush to check out how to do this I just clicked on the link in the email and went to your site... installed the script... got it sorted and then came to reply and found the rest of your post!

Thank you so much for your response. I actually prefer the non toggling text version in your post and it works fabulously... thank you, thank you, thank you!

jo

Hi Vic,

I might push my luck a bit and ask you how I can run a statement to open each div (on my other script) if preferred.

Something like this I was hoping for:

<cfif group1preferenceOpen is "N">
<div id="group1" style="display: none;">
<cfelse>
<div id="group1" style="display:.....
</cfif>


Or should it happen somewhere else?

All the new code is on this page:
http://www.textit.com.au/checkboxForm.cfm

Thank you once again,

jo