Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

javascript question


  • Please log in to reply
8 replies to this topic

#1 nixx

nixx

  • Members
  • 159 posts
  • OFFLINE
  •  
  • Local time:03:42 PM

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>


BC AdBot (Login to Remove)

 


#2 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:01:42 AM

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?

#3 nixx

nixx
  • Topic Starter

  • Members
  • 159 posts
  • OFFLINE
  •  
  • Local time:03:42 PM

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

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:01:42 AM

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.

#5 nixx

nixx
  • Topic Starter

  • Members
  • 159 posts
  • OFFLINE
  •  
  • Local time:03:42 PM

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

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:01:42 AM

Posted 15 April 2009 - 08:15 PM

What browser?

#7 nixx

nixx
  • Topic Starter

  • Members
  • 159 posts
  • OFFLINE
  •  
  • Local time:03:42 PM

Posted 15 April 2009 - 08:26 PM

firefox 3, ie6, safari 3, chrome

#8 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:01:42 AM

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?

#9 nixx

nixx
  • Topic Starter

  • Members
  • 159 posts
  • OFFLINE
  •  
  • Local time:03:42 PM

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

Edited by nixx, 16 April 2009 - 01:04 AM.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users