Trying to turn on/off 4 checkboxes with a button click in javascript

[lamarw]

Hello everyone,
I'm very new at javascript and have run into smething I cannot solve. I've looked over many other postings on this site, they are all very interesting and helpful but none address my partricular situation:

I have a series of checkboxes on my web page in a table. 4 checkboxes per table <TD> separated by <BR>'s. The last item in the <TD> is a type=button and an onclick=EightAM_OnClick() event. The four checkboxes represent the hour 8am in fifteen minute increments (08:00, 08:15, 08:30, 08:45). What I would like the user to do is either select individual checkboxes(no problem) or click the button at the bottom and check all the checkboxes for this hour or uncheck them(problem).
I have no real code to show you as I'm looking for your help with this. The checkboxes each have unique names. Just as a test what I've tried using:

<script type="text/javascript">
function EightAM_OnClick()
{
checkbox1.setchecked = (1)
}
</script>

The above is just a test to see if I can actually set the checkbox to 'checked' which I haven't been able to do yet.
(I know, I know not very complicated)

The HTML and ASP looks like this (the button that calls the function is at the bottom in the input tag type=button):

<TD width=60>
<INPUT type="checkbox" name="checkbox1" <%if Request.Form("checkbox1")="on" then Response.Write "Checked" end if%>><font size=2>08:00a</font>
<BR>
<INPUT type="checkbox" name="checkbox7" <%if Request.Form("checkbox7")="on" then Response.Write "Checked" end if%>><font size=2>08:15a</font>
<BR>
<INPUT type="checkbox" name=checkbox13 <%if Request.Form("checkbox13")="on" then Response.Write "Checked" end if%>><font size=2>08:30a</font>
<BR>
<INPUT type="checkbox" name=checkbox19 <%if Request.Form("checkbox19")="on" then Response.Write "Checked" end if%>><font size=2>08:45a</font>
<BR>
<INPUT type="button" value="8am" id=8am name=8am style="WIDTH: 61px; HEIGHT: 24px" size=31 onclick="EightAM_OnClick()">
</TD>

This is all developmental testing at this point.

Any help is very much appreciated...

 

[kaht]

This is a generic function that should work for each button in your table provided every td with the checkboxes and button is set up in the same structure:

<script type="text/javascript">

function checkAll(obj) {
   var parentObj = obj.parentNode;
   var inputArray = parentObj.getElementsByTagName("input");
   for (var i = 0; i < inputArray.length; i++) {
      if (inputArray[i].type == "checkbox") {
         inputArray[i].checked = true;
      }
   }
}

</script>

<input type="button" .......... onclick="checkAll(this)" />

-kaht

[small] <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]
[small](He's back)[/small]

 

[lamarw]

Wow!
That was fast! Kaht, thank you very much! I also found a thread that was useful but your response will shortcut me trying to modify it to work!

 

[lamarw]

Incidentally, will this turn them all off if the button is clicked again? I would like to be able to toggle the checkboxes by use of the button.

Lamar

 

[lamarw]

Would this be correct syntax to use the button to toggle the checkboxes?

function checkAll(obj){
var parentObj = obj.parentNode;
var inputArray = parentObj.getElementsByTagName("input");
for (var i = 0; i < inputArray.length; i++) {
if (inputArray.type == "checkbox") {
if (inputArray.checked == True) {
inputArray.checked = false;
}
else {
inputArray.checked = true;
}
}
}
}

 

[LFI]

I would make "True" into "true" (lower-case), but it seems like it should work.

I imagine that in the time it took you to post the question, you could have tried it for yourself! (which, I imagine, you have done by now).

Dave

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...east is east and west is west and if you take cranberries and stew them like applesauce
they taste much more like prunes than rhubarb does

 

[lamarw]

Yes, I did, and it turns them all on but doesn't turn them off again......any thoughts?

 

[LFI]

Did you do the case-change? ([!]T[/!]rue to [!]t[/!]rue)?

Dave

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...east is east and west is west and if you take cranberries and stew them like applesauce
they taste much more like prunes than rhubarb does

 

[LFI]

By the way, you should be able to replace your if-block with this:

if (inputArray[i].type == "checkbox") 
{
 inputArray[i].checked = [!]![/!]inputArray[i].checked;
}

Dave

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...east is east and west is west and if you take cranberries and stew them like applesauce
they taste much more like prunes than rhubarb does

 

[lamarw]

Sorry, yes I did change the 'T' to 't'

I'll try using the replacement but I am so unfamiliar with java syntax that it takes me forever to make insignificant changes

 

[LFI]

The gist of what I suggested as the replacement was that the checked property should be set to the opposite of what it is now (i.e., to the value that it is NOT/[!]![/!]). That is, if x.checked is true, then !x.checked will be false and vice-versa.

Dave

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...east is east and west is west and if you take cranberries and stew them like applesauce
they taste much more like prunes than rhubarb does

 

[LFI]

unfamiliar with java syntax

Also, don't make the mistake of calling JavaScript "java". The name is misleading. The two are not related.

Dave

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...east is east and west is west and if you take cranberries and stew them like applesauce
they taste much more like prunes than rhubarb does

 

[kaht]

The approach you're taking right now won't check/uncheck all the boxes.... instead it will flip flop the values of all the checkboxes.

So, say you click the first checkbox and then click the check all button. All the checkboxes become checked except the first one - which becomes unchecked. I would check the value of the button to see what status it's set at and set it up someway like this:

function checkAll(obj) {
   [!]var toggleCheck = (obj.value == "Check All") ? true : false;
   obj.value = (toggleCheck) ? "Uncheck All" : "Check All";[/!]
   var parentObj = obj.parentNode;
   var inputArray = parentObj.getElementsByTagName("input");
   for (var i = 0; i < inputArray.length; i++) {
      if (inputArray[i].type == "checkbox") {
         inputArray[i].checked = [!]toggleCheck[/!];
      }
   }
}

-kaht

[small] <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]
[small](He's back)[/small]

 

[LFI]

You are so right!

Oops.

Dave

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...east is east and west is west and if you take cranberries and stew them like applesauce
they taste much more like prunes than rhubarb does

 

[lamarw]

Thanks everyone for your comments. This has been a learning experience for me. I ended up utilizing the 'inputArray.checked = !inputArray.checked;' suggestion and all is working well. As was observed this code has a toggling effect on the individual controls, that is working also.

Additionally I appreciate the java vs javascript comment above. Thanks for that too.

Again thanks to all,

Lamar