Check/uncheck all works except in fieldset?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Check/uncheck all works except in fieldset?

Post by JAB Creations »

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


This script works except when you have a fieldset element. What do we have to modify in the script to get it to work with the fieldset?

- John 

[syntax="html"]<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Check Boxes</title>

<script type="text/javascript">
function Checkall(form){
for (var i = 1; i < form.elements.length; i++){
eval("form.elements[" + i + "].checked = form.elements[0].checked");
}
}
</script>
</head>

<body>

<form>
<fieldset>
<table>
<colgroup style="width: 20px;"></colgroup>
<colgroup width="33%"></colgroup>
<colgroup width="33%"></colgroup>
<colgroup width="33%"></colgroup>
<thead>
<tr>
<td><input onclick="Checkall(this.form);" type="checkbox" value="" />

</td>
<td>From
</td>
<td>Subject
</td>
<td>Recieved
</td>
</tr>
</thead>
<tfoot>

<tr>
<td><input type="checkbox" value="" />
</td>
<td>From
</td>
<td>Subject
</td>
<td>Recieved
</td>
</tr>

</tfoot>
<tbody>
<tr>
<td><input type="checkbox" value="" />
</td>
<td>From
</td>
<td>Subject
</td>
<td>Recieved
</td>

</tr>
<tr>
<td><input type="checkbox" value="" />
</td>
<td>From
</td>
<td>Subject
</td>
<td>Recieved
</td>

</tr>
<tr>
<td><input type="checkbox" value="" />
</td>
<td>From
</td>
<td>Subject
</td>
<td>Recieved
</td>

</tr>
</tbody>
</table>
</fieldset>
</form>

</body>
</html> 

feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
User avatar
volka
DevNet Evangelist
Posts: 8391
Joined: Tue May 07, 2002 9:48 am
Location: Berlin, ger

Post by volka »

try

Code: Select all

function Checkall(form) {
	alert(form.elements[0].tagName);
	for (var i = 1; i < form.elements.length; i++) {
		eval("form.elements[" + i + "].checked = form.elements[0].checked");
	}
}
and you will see.
btw: Why do you use eval() in this function?
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

Here's a function that will check all checkboxes in a form (if it's in one), or the whole page (if there is no form)

Code: Select all

function checkall(element) {
			inputs = (element.form ? element.form.getElementsByTagName('input') : document.getElementsByTagName('input'));
			for(var i in inputs) if(inputs[i].type=='checkbox') inputs[i].checked = element.checked;
		}
Call it like this:

Code: Select all

<input type="checkbox" id="one" onclick="checkall(this)"/>
<input type="checkbox" id="two" />
<input type="checkbox" id="three" />
<fieldset>
	<input type="checkbox" id="four" />
</fieldset>
<form name='bob2' action="." method="post">
	<input type="checkbox" id="2one" onclick="checkall(this)"/>
	<input type="checkbox" id="2two" />
	<input type="checkbox" id="2three" />
	<fieldset>
		<input type="checkbox" id="2four" />
	</fieldset>
</form>
Post Reply