javascript question

#1 nixx

Forum Regular

Group: Members
Posts: 157
Joined: 17-January 06

Posted 15 April 2009 - 01:02 AM

Hi,

I have a Javascript code that enables/disables all the other checkboxes when the ANY checkbox is unchecked/checked. I tried putting the same code in the onclick event of the reset button but you have to click on it twice for the checkboxes to be disabled. Any idea why this is happening? Thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
	<head>
		<title>reset test</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<script type="text/javascript">
			<!--
				window.onload = function()
				{
					var chkAny = document.getElementById('chkAny');
					var reset = document.getElementById('rst');
					
					reset.onclick = chkAny.onclick = function()
					{
						var choices = document.getElementById('checkboxes').getElementsByTagName('input').length;
						var i = 1;
						if(chkAny.checked == true)
						{
							for(i=1; i<choices+1; i++)
							{
								objItem = document.getElementById('chk' +  i);
								// Disable/Enable the checkbox.
								objItem.disabled = true;
								// Should the checkbox be disabled?
								objItem.checked = false;
							}
						}
						else
						{
							for(i=1; i<choices+1; i++)
							{
								objItem = document.getElementById('chk' + i);
								objItem.disabled = false;
								objItem.checked = false;
							}
						}
					}
				}
						//-->
		</script>
	</head>
	<body>
		<form action="">
			<fieldset>
				<legend>Checkboxes</legend>
				<ul>
					<li>
						<label for="chkAny">
							<input id="chkAny" type="checkbox" value="any" />
							Any
						</label>
					</li>
				</ul>
				<ul id="checkboxes">
					<li>
						<label for="chk1">
							<input id="chk1" name="choices" type="checkbox" value="1" />
							1
						</label>
					</li>
					<li>
						<label for="chk2">
							<input id="chk2" name="choices" type="checkbox" value="2" />
							2
						</label>
					</li>
					<li>
						<label for="chk3">
							<input id="chk3" name="choices" type="checkbox" value="3" />
							3
						</label>
					</li>
				</ul>
			</fieldset>
			<p>
				<input type="reset" id="rst" />
			</p>
		</form>
	</body>
</html>

#2 groovicus

Hail Groovicus!

Group: Moderator
Posts: 9,605
Joined: 05-June 04
Gender:Male
Location:Centerville, SD

Posted 15 April 2009 - 06:48 AM

Not right off the top of my head. What are you trying to accomplish? Is there any reason that you can't just use radio buttons?

"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens

#3 nixx

Forum Regular

Group: Members
Posts: 157
Joined: 17-January 06

Posted 15 April 2009 - 07:13 PM

If I used radio buttons, wouldn't that mean I would have to pick only one choice? You could choose choices 1 and 2 only, choosing any would include choosing 3

#4 groovicus

Hail Groovicus!

Group: Moderator
Posts: 9,605
Joined: 05-June 04
Gender:Male
Location:Centerville, SD

Posted 15 April 2009 - 07:53 PM

I didn't understand what you were trying to do. Now I do. For some reason I read that when any checkbox was selected, the others were disabled. Now I see the issue. It has to do with the way that you are indexing the array. Array indexes always start with zero, not one. So in your loops, you are starting with element 1 --> for (i=1; <-- That is really the second element in the array of controls. So the first click disables the one that has the check in it, and then has to go around again to get the others that are still disabled. Try this instead. First get rid of var i=1; It is not needed, and will conflict with the I that you are using in your for-loops. Next, change your for-loops to read like this: for(i=0; i<choices; i++)

Let me know if it does what you expect now.

"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens

#5 nixx

Forum Regular

Group: Members
Posts: 157
Joined: 17-January 06

Posted 15 April 2009 - 08:02 PM

I modified the code to this:

<script type="text/javascript">
			<!--
				window.onload = function()
				{
					var chkAny = document.getElementById('chkAny');
					var reset = document.getElementById('rst');
					
					reset.onclick = chkAny.onclick = function()
					{
						var choices = document.getElementById('checkboxes').getElementsByTagName('input').length;
						//var i = 1;
						var j = 1;
						if(chkAny.checked == true)
						{
							for(i=0; i<choices; i++)
							{
								objItem = document.getElementById('chk' +  j);
								// Disable/Enable the checkbox.
								objItem.disabled = true;
								// Should the checkbox be disabled?
								objItem.checked = false;
								
								j = j + 1;
							}
						}
						else
						{
							for(i=0; i<choices; i++)
							{
								objItem = document.getElementById('chk' + j);
								objItem.disabled = false;
								objItem.checked = false;
								
								j = j + 1;
							}
						}
					}
				}
			//-->
		</script>

The var j is for the id of the input[type=checkbox]. It works fine if I check/uncheck the Any checkbox. The reset button also has the same code in its onclick event but I have to click on it twice for it to work. :thumbsup:

#6 groovicus

Hail Groovicus!

Group: Moderator
Posts: 9,605
Joined: 05-June 04
Gender:Male
Location:Centerville, SD

Posted 15 April 2009 - 08:15 PM

What browser?

"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens

#7 nixx

Forum Regular

Group: Members
Posts: 157
Joined: 17-January 06

Posted 15 April 2009 - 08:26 PM

firefox 3, ie6, safari 3, chrome

#8 groovicus

Hail Groovicus!

Group: Moderator
Posts: 9,605
Joined: 05-June 04
Gender:Male
Location:Centerville, SD

Posted 15 April 2009 - 09:23 PM

I have been looking at this for about twenty minutes, and the only thing that I see is that you are missing two semicolons on the last two curly braces (according to JSlint. Step through the code using Firebug. You should not be using a single function to handle resetting, and the actions for the master checkbox. As is, the function is designed to deselect the master box and enable the others, or select the master checkbox, and disable the others. The action of the reset is to enable all boxes, and uncheck them. Your function uses an if-else structure, meaning that it should only do one or the other. So although I don't exactly see why it does what it does, it makes sense just by looking at the code that it wouldn't.

That's all I can see right now. I don't see how the value of chkAny ever gets changed since it is not ever called, but from tracing the code, I see that somewhere the objItem gets set to it.
Weird. Is that your code?

"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens

#9 nixx

Forum Regular

Group: Members
Posts: 157
Joined: 17-January 06

Posted 16 April 2009 - 12:26 AM

chkAny.checked changes to true or false. I made a separate code for the reset button

reset.onclick = function()
					{
						chkAny.checked = false;
						
						var choices = document.getElementById('checkboxes').getElementsByTagName('input').length;
						var j = 1;
						
						for(i=0; i<choices; i++)
						{
							objItem = document.getElementById('chk' + j);
							objItem.disabled = false;
							objItem.checked = false;
							
							j = j + 1;
						}
					}

It works fine now.

By the way, I checked JSLint, It says there's an error somewhere but I can't seem to figure out where to place the two semi-colons. The error console of firefox isn't reporting any errors

This post has been edited by nixx: 16 April 2009 - 01:04 AM