JavaScript Toggle Checkbox State

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

JavaScript Toggle Checkbox State

Post 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.
Last edited by jayshields on Tue Dec 06, 2005 10:36 am, edited 1 time in total.
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Post 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.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Post by jayshields »

Brilliant. Thanks alot. I'll try and implement later/tomorrow. I'll let you know how I get on.

Thanks again.
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

I posted the same thing some days back for jaylin. I can't remember the topic tho :?
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Post 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.
Charles256
DevNet Resident
Posts: 1375
Joined: Fri Sep 16, 2005 9:06 pm

Post 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..
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Post by jayshields »

I don't use/have FireFox. I'll install it now and find that extension and see what I get...
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post 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..
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Post 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!?
Last edited by jayshields on Thu Dec 08, 2005 4:31 pm, edited 1 time in total.
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post 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>
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Post 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 :)
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

well I guess I mis-understood what your'e trying to do.

what exactly are you trying to do?
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

AHa! Found my post! Check it here :arrow: viewtopic.php?p=220878&highlight=checkbox#220878
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Post 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?
Post Reply