Page 1 of 2

JavaScript Toggle Checkbox State

Posted: Sat Dec 03, 2005 3:34 pm
by jayshields
Ok, I have pretty much no experience with JS, so I guessed writing a function. Turned out all wrong.

I made a .js file with this in it:

Code: Select all

<SCRIPT LANGUAGE="JavaScript">
function toggleCheck(field) {
	for (i = 0; i < field.length; i++) {
		if (field[i].checked = false) {
			field[i].checked = true;
			temp = true;
		}
		if (temp != true) {
			field[i].checked = false;
		}
	}
}
</script>
Included it in my .php file after I had started the session, and tried to access it, I get an error (just a stupid warning thing in the bottom left of IE) when I click and master checkbox and nothing happens apart from the expected; the checkbox in question gets checked/unchecked.

In my PHP file I dynamically create a list of checkboxes named in an array, box[]. That is in a form named fileform. Here is the code to the checkbox which I want to control all the other checkboxes.

Code: Select all

<input type="checkbox" name="boxchanger" onClick="toggleCheck(document.fileform.box)">
So, I basically want the array of checkboxes (box[]) to match the checked value of the boxchanger checkbox when changed.

Is my function all wrong?

TIA.

Posted: Tue Dec 06, 2005 10:35 am
by jayshields
Ok, since no one knew the solution, and I still can't find it anywhere, I'm going to reword it. I hope this isn't classed as double posting.

I basically want to a create a master checkbox. A checkbox which every other checkbox will mimic. If anyone has used Hotmail, you will have seen it at the top of the checkbox column in the list of emails. That is exactly what I want to create.

Here is a screenshot of my application:
Image

As you can see, you can use the checkboxes in the end column to select a file, from there you can choose what to do with the selected files. If the user wants to do something with every file, then they would have to tick every checkbox, which is time consuming. So the idea behind this is that the user can tick just the checkbox at the top of the column, and all the checkboxes will follow suit and get a tick in them aswell. On the other hand, if the user wants to untick all the checkboxes, they can just untick the master checkbox at the top of the column.

I hope that explains it better.

If someone can find something on Google you're a better Googler than me :)

Thanks.

Posted: Tue Dec 06, 2005 10:51 am
by Chris Corbyn

Code: Select all

<html>
<head>
<title>Multiple file uploader</title>
<script type="text/javascript">
<!--

function toggleCheck(el)
{
	var inputBoxes = document.getElementsByTagName('input');
	
	for (var x in inputBoxes)
	{
		if (inputBoxes[x].type = 'checkbox')
		{
			if (el.checked == true) inputBoxes[x].checked = true;
			else inputBoxes[x].checked = false;
		}
	}
}

// -->
</script>
</head>
<body>
<div style="width: 500px; padding: 10px; background: #BBBBFF; border: 1px solid #CCCCCC;">
	<div style="float: left; width: 40%;">Toggle all</div><div style="float: left;"><input type="checkbox" name="master" onclick="toggleCheck(this);" /></div>
	<div style="clear: both;"></div>
	<div style="float: left; width: 40%;">Box Number 1</div><div style="float: left;"><input type="checkbox" name="num1" /></div>
	<div style="clear: both;"></div>
	<div style="float: left; width: 40%;">Box Number 2</div><div style="float: left;"><input type="checkbox" name="num2" /></div>
	<div style="clear: both;"></div>
	<div style="float: left; width: 40%;">Box Number 3</div><div style="float: left;"><input type="checkbox" name="num3" /></div>
	<div style="clear: both;"></div>
	<div style="float: left; width: 40%;">Box Number 4</div><div style="float: left;"><input type="checkbox" name="num4" /></div>
	<div style="clear: both;"></div>
	<div style="float: left; width: 40%;">Box Number 5</div><div style="float: left;"><input type="checkbox" name="num5" /></div>
	<div style="clear: both;"></div>
	<div style="float: left; width: 40%;">Box Number 6</div><div style="float: left;"><input type="checkbox" name="num6" /></div>
	<div style="clear: both;"></div>
	<div style="float: left; width: 40%;">Box Number 7</div><div style="float: left;"><input type="checkbox" name="num7" /></div>
	<div style="clear: both;"></div>
	<div style="float: left; width: 40%;">Box Number 8</div><div style="float: left;"><input type="checkbox" name="num8" /></div>
	<div style="clear: both;"></div>
</div>
</body>
</html>
Example: http://www.w3style.co.uk/devnet/checkboxes.html

Posted: Tue Dec 06, 2005 12:49 pm
by jayshields
Brilliant. Thanks alot. I'll try and implement later/tomorrow. I'll let you know how I get on.

Thanks again.

Posted: Wed Dec 07, 2005 4:40 am
by n00b Saibot
I posted the same thing some days back for jaylin. I can't remember the topic tho :?

Posted: Thu Dec 08, 2005 12:55 pm
by jayshields
Ok, it doesn't work.

As soon as I click my master checkbox an error warning appears in the bottom left of IE, and nothing happens to my other checkboxes.

I'm probably misinterpreting the implementation of the JavaScript function or something, but I don't have a clue.

I have absolutely no idea why as I've just checked your example and viewed the source, here are some snippets of my code:

checkboxes.js:

Code: Select all

<script type="text/javascript">
<!--

function toggleCheck(el)
{
	var inputBoxes = document.getElementsByTagName('input');
	
	for (var x in inputBoxes)
	{
		if (inputBoxes[x].type = 'checkbox')
		{
			if (el.checked == true) inputBoxes[x].checked = true;
			else inputBoxes[x].checked = false;
		}
	}
}

// -->
</script>
Sections of index.php:

Code: Select all

//Show the HTML page
echo '
<html>
	<head>
		<title>PHPJayFile</title>
		<LINK REL=stylesheet HREF="includes/style.css" TYPE="text/css">';
	include ('includes/checkboxes.js'); //Include the JS function
echo '
	</head>
	<body>
		<center>
		<font face="Verdana">
		<a href="index.php"><img src="images/logo.jpg" border="0" alt="PHPJayFile"></a><br>
		<br>';
...

Code: Select all

echo '<td bgcolor="black"><b><center><font color="white"><input type="checkbox" name="master" onClick="toggleCheck(this);"></font></center></b></td>';
... (this next section is in a loop for all the files)

Code: Select all

echo '<td><center><input type="checkbox" name="box[]" value="' . $contents[$o]['file'] . '"></center></td>';
I hope that's enough information to analyse my problem. I just can't work it out.

Thanks.

Posted: Thu Dec 08, 2005 1:27 pm
by Charles256
what's the error? go in firefox and try running it, firefox gives more readable errors IMO. assuming you have the developer extension installed..

Posted: Thu Dec 08, 2005 2:15 pm
by jayshields
I don't use/have FireFox. I'll install it now and find that extension and see what I get...

Posted: Thu Dec 08, 2005 4:11 pm
by John Cartwright
Charles256 wrote:what's the error? go in firefox and try running it, firefox gives more readable errors IMO. assuming you have the developer extension installed..
fyi, you do not need the developer extension intalled to view the javascript console..

Posted: Thu Dec 08, 2005 4:18 pm
by jayshields
Ok, this is beginning to seem extremely weird to me.

I got FireFox, installed it custom and chose the Developer Extension thing to be installed along with it.

I went to my application, upon clicked the master checkbox, it changed every input to a checkbox (the submit buttons) and ticked/unticked them on click.

So I quickly realised that:

Code: Select all

if (inputBoxes[x].type = 'checkbox')
was causing it, changed it from = to == and it worked!

I was chuffed. Went back to IE. Doesn't work! Haha.

No errors in IE anymore, and no errors what-so-ever (as far as I can see - maybe tell me where I should be looking, never used FF before...) in FireFox.

Can someone tell me where this console thing is? Edit: OK found it, got it on, still trying to work out how to use it... Edit: Ok, I've sort of figured out how to use it, but it shows some errors which I don't understand, and I don't know which website it found them on..

Code: Select all

Error: uncaught exception: [Exception... "Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIWebNavigation.loadURI]"  nsresult: "0x80070057 (NS_ERROR_ILLEGAL_VALUE)"  location: "JS frame :: chrome://global/content/viewSource.js :: viewSource :: line 145"  data: no]
is one of the errors, and theres one below identical if not nearly identical.

I also get this:

Code: Select all

Error: syntax error
Source File: javascript: http://home.jaysfiles.co.uk/PHPJayFile
Line: 1, Column: 38
Source Code:
 http://home.jaysfiles.co.uk/PHPJayFile
which I don't understand. Line one contains <html> only, so nothing is in or even near column 38...

Can anyone help!?

Posted: Thu Dec 08, 2005 4:26 pm
by Burrito
try this:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
<script>
function checkEmAll(where)
{
	for (i=0; i < document.getElementsByName(where).length; i++)
	{
		document.getElementsByName(where).item(i).checked = true;
	}	
}
</script>
</head>

<body>
<form>
check all<input type="checkbox" name="checkall" onClick="checkEmAll('checkboxes[]')"><br>
<input type="checkbox" name="checkboxes[]"><br>
<input type="checkbox" name="checkboxes[]"><br>
<input type="checkbox" name="checkboxes[]"><br>
<input type="checkbox" name="checkboxes[]"><br>
<input type="checkbox" name="checkboxes[]"><br>
<input type="checkbox" name="checkboxes[]"><br>
<input type="checkbox" name="checkboxes[]"><br>
<input type="checkbox" name="checkboxes[]"><br>
</form>


</body>
</html>

Posted: Thu Dec 08, 2005 4:44 pm
by jayshields
I don't know why you suggested that. That function will only check all the boxes (?), and I don't really want to go back to sqaure one, it works a treat in FF as it is. Unless I'm misinterpreting again and you want me to try using a DOC TYPE.

I'm quite liking FireFox, it seems a bit random with HTML parsing though, IE displays the page layout fine, but in FF, sometimes it will forget to include a <br>, and then if you ctrl+r, it comes back! If I browse away it's usually fine, but the odd page pops up with a missing line break and I have to refresh, and yes, I have had the same page more than once.

Sorry for sounding like a w*nker mate, it's late and this is now officially annoying me :)

Posted: Thu Dec 08, 2005 4:49 pm
by Burrito
well I guess I mis-understood what your'e trying to do.

what exactly are you trying to do?

Posted: Thu Dec 08, 2005 11:57 pm
by n00b Saibot
AHa! Found my post! Check it here :arrow: viewtopic.php?p=220878&highlight=checkbox#220878

Posted: Fri Dec 09, 2005 5:45 am
by jayshields
Thanks for that. I'll have a go with it later on.

Edit: IT WORKED! :D

Cheers :)

Now I'm just trying to make the layout look the same in IE as FF, damn you people for making me try FF!

Is it known that IE puts line breaks in after </form> and FF doesn't? I think that's the provlem I'm having now. Any way to solve it?