PDA

Click to See Complete Forum and Search --> : radio buttons and checkboxes

casa
10-10-2003, 03:40 PM
I need a script that will select all the checkboxes in a dynamically created group whenever a radio button is selected. I could have from 1 to 5 radio buttons and up to 8 checkboxes. I might have output that looks something like this:

0 English 9
[] section 1
[] section 2
[] section 3

0 English 10
[] section 1
[] section 3

0 English AP 12
[] section 1

So, if the user clicks on English 9, then all the sections 1-3 below it are selected, then if they change their mind and click on English 10, then the English 9 checkboxes are cleared and the English 10 checkboxes are all checked.

Has anyone on this forum created a script like or similar to this, or seen one somewhere? Thanks...
Dimitri
10-10-2003, 07:16 PM
I won't code everything for you (so please... don't ask me to), but this ought to get you started. Feel free to modify it as you wish.

Cheers.
Dimitri
--------------------

<html>
<head>
<script language="javascript">
<!--
&nbsp;&nbsp;&nbsp;&nbsp;function choose(myElement) {
&nbsp;&nbsp;&nbsp;&nbsp; for (var i = 0; i < document.forms[0].elements.length; i++) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var currentName = document.forms[0].elements[i].name;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (document.forms[0].elements[i].type == "checkbox") {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var x = 0; x < document.forms[0].elements[currentName].length; x++)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.forms[0].elements[currentName][x].checked = (document.forms[0].elements[i].name.split("-")[1] == myElement.name.split("-")[1]);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (document.forms[0].elements[i].type == "radio")
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.forms[0].elements[currentName].checked = (document.forms[0].elements[i].name.split("-")[1] == myElement.name.split("-")[1]);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}
//-->
</script>
</head>
<body>
<form>
&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="a-1" onclick="choose(this);"><br>
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="b-1"><br>
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="b-1"><br>
&nbsp;&nbsp;&nbsp;&nbsp;<br>
&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="a-2" onclick="choose(this);"><br>
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="b-2"><br>
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="b-2"><br>
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="b-2"><br>
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="b-2"><br>
&nbsp;&nbsp;&nbsp;&nbsp;<br>
&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="a-3" onclick="choose(this);"><br>
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="b-3"><br>
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="b-3"><br>
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="b-3"><br>
</form>
</body>
</html>
casa
10-10-2003, 10:50 PM
You are too awsome... Thanks. I'll study the code and see if I can figure out what I was doing wrong. At first glance, It's pretty different from what I had come up with, so hopefully I'll learn something here.

One question... action on this form will be a php script. If all the checkboxes in each group are named the same, can you tell me how will the information be retrieved. Will $_POST['b-1'] be an array?

Javascript is my weakest area. After almost two years, I'm finally getting to go to a JavaScript training class in about 2 weeks. I hate that I will have to travel and won't have a computer availabe (too poor for a laptop) to go home and play with what I've learned at night. But hopefully, I'll learn enough to be dangerous :p Thanks again...
Dimitri
10-11-2003, 01:09 AM
If you prefer, you can assign values to each checkboxes. For example:
<input type="checkbox" name="b-1" value="section 1.1">
<input type="checkbox" name="b-1" value="section 1.2">
<input type="checkbox" name="b-1" value="section 1.3">

So instead of the value of b-1 being a generic "on" value, it could be "section 1.1" and/or "section1.3", or whatever, depending on what was checked.

Regarding your PHP question, I don't use PHP. In the above example, in JSP, I would use a method called request.getParameterValues("b-1"), which would give me a string array of all the "b-1" checkbox values that were checked.

For PHP, I don't know what the equivalent call would be, but I imagine that it would also return an array of some sort, which you can then iterate through (PHP is silly if it doesn't).

You may have better luck asking that particular question on a PHP forum.

Good luck.
Dimitri
casa
10-11-2003, 08:44 AM
I was doing some testing of different situation and found that if there is only one checkbox associated with a particular radio button, no matter if it's the first, in the middle somewhere, or last, when you click that radio button, the related checkbox does not get checked. I was playing with this at about midnight and was pretty tired, so it could have been that I was just being dense. However, I couldn't figure out how to add a condition to make it work or even figure out why it wasn't working. If I understand the code right, it shouldn't care if there is only one checkbox associated with a particular radio button because it looks like it iterates through each radio/checkbox on the entire form, regardless of how many of either there are. Oh well, I really appreciate you coming up with what you did. I'll play some more and see what I come up with. Thanks...
Dimitri
10-11-2003, 08:57 AM
I forgot to mention one tiny little thing: you need to follow certain naming conventions.

The name of each set of radio and checkboxes need to end with a hyphen, followed by a number. That's how the script understands which radio box belongs with which radio boxes. See below:

<input type="radio" name="a-3" onclick="choose(this);"><br>
<input type="checkbox" name="b-3"><br>
<input type="checkbox" name="b-3"><br>
<input type="checkbox" name="b-3"><br>

Instead of "a-3" you could name the radio box "blablabla-3" and the checkboxes "qqqq-3". It wouldn't matter, so long as they end with "-3" (or -4 or -200, or whatever.)

And, obviously, you need to also avoid naming the radio box the exact same name as the checkbox (e.g., naming everything "a-3" wouldn't work.)

Sorry for not stating this earlier.

Cheers.
Dimitri
Dimitri
10-11-2003, 09:01 AM
FYI:

The part of the script that reads the number associated with the element name is this:
.split("-")[1]

split("-") splits a string (test-123) into an array at "-", so it becomes "test" and "123".

Next, the [1] looks at the second element of the array, which would be "123".

This was probably more than you wanted to know, but anyway...

Good luck.
Dimitri
casa
10-11-2003, 10:31 AM
Dimitri,

That's exactly what I wanted to know and kind of figured out already. That's why it doesn't make any since to me why it would CARE if there were only 1 checkbox associated with a particular radio button. This is what I came up with for my own testing purposes:

<html>
<head>
<title>Untitled</title>
<script language="javascript">
<!--
function choose(myElement) {
for (var i = 0; i < document.forms[0].elements.length; i++) {
var currentName = document.forms[0].elements[i].name;
if (document.forms[0].elements[i].type == "checkbox") {
for (var x = 0; x < document.forms[0].elements[currentName].length; x++)
document.forms[0].elements[currentName][x].checked =
(document.forms[0].elements[i].name.split("-")[1] == myElement.name.split("-")[1]);
}
if (document.forms[0].elements[i].type == "radio")
document.forms[0].elements[currentName].checked =
(document.forms[0].elements[i].name.split("-")[1] == myElement.name.split("-")[1]);
}
}
//-->
</script>
</head>
<body>
<form>
<table border="0" cellpadding="1" cellspacing="0">
<tr>
<td><input type="Radio" name="c-1" value="Eng9" onClick="choose(this);"></td>
<td colspan="2">English 9</td>
</tr>
<tr><td>.</td><td><input type="Checkbox" name="s-1" value="Eng9-01A"></td><td>01A</td></tr>
<tr><td>.</td><td><input type="Checkbox" name="s-1" value="Eng9-02A"></td><td>02A</td></tr>
<tr><td>.</td><td><input type="Checkbox" name="s-1" value="Eng9-03A"></td><td>03A</td></tr>
<tr><td colspan="3">&nbsp;</td></tr>
<tr>
<td><input type="Radio" name="c-2" value="Eng10" onClick="choose(this);"></td>
<td colspan="2">English 10</td>
</tr>
<tr><td>.</td><td><input type="Checkbox" name="s-2" value="Eng10-01A"></td><td>01A</td></tr>
<tr><td colspan="3">&nbsp;</td></tr>
<tr>
<td><input type="Radio" name="c-3" value="Eng12AP" onClick="choose(this);"></td>
<td colspan="2">English 12 AP</td>
</tr>
<tr><td>.</td><td><input type="Checkbox" name="s-3" value="Eng12AP-01A"></td><td>01A</td></tr>
<tr><td>.</td><td><input type="Checkbox" name="s-3" value="Eng12AP-02A"></td><td>02A</td></tr>
</table>
</form>
</body>
</html>
Try it, you'll see what I'm talking about. BTW, I'm a long time programmer, so you can assume that I know a little of something about all this. However, I do pretty much stink at JavaScript. I started out as a COBOL programmer in the late '70's. Took a semi break to raise a family and get my degree. I got back in it about 5 years ago. Started by learning HTML, then progressed from there. Lots of new stuff to learn. I'm pretty good in PHP and fair in Perl and ASP, but JavaScript has been tougher for me for some reason. The class in a few weeks should help and maybe fill in some gaps in my understanding of the process.
casa
10-11-2003, 11:48 AM
if there is only one checkbox for a radio button, then
document.forms[0].elements[currentName].length is undefined.
It should have a value of 1. I don't know how to check for this:
if (document.forms[0].elements[i].type == "checkbox") {
if (!document.forms[0].elements[currentName].length) { leng = 1; }
else { leng = document.forms[0].elements[currentName].length; }
alert ("length: "+leng); // leng getting set right here
for (var x = 0; x < leng; x++) {
document.forms[0].elements[currentName][x].checked =
(document.forms[0].elements[i].name.split("-")[1] == myElement.name.split("-")[1]);
}
}
I think that would fix it. I just don't know how to code it and I can't find it in my worthless book.

I don't know though. I tried it before I hit post and then I get document.forms[0].elements[currentname][0] has no properties when leng = 1. I might have to just add a hidden field for each checkbox and check it on the php side. I'd rather not have to do that though.
Dimitri
10-11-2003, 07:57 PM
Oops. Sorry about that. Here's a version that should work:

function choose(myElement) {
&nbsp;&nbsp;&nbsp;&nbsp;for (var i = 0; i < document.forms[0].elements.length; i++) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var currentName = document.forms[0].elements[i].name;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (document.forms[0].elements[i].type == "checkbox") {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (document.forms[0].elements[currentName].length)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var x = 0; x < document.forms[0].elements[currentName].length; x++)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.forms[0].elements[currentName][x].checked = (document.forms[0].elements[i].name.split("-")[1] == myElement.name.split("-")[1]);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.forms[0].elements[currentName].checked = (document.forms[0].elements[i].name.split("-")[1] == myElement.name.split("-")[1]);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (document.forms[0].elements[i].type == "radio")
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.forms[0].elements[currentName].checked = (document.forms[0].elements[i].name.split("-")[1] == myElement.name.split("-")[1]);
&nbsp;&nbsp;&nbsp;&nbsp;}
}
casa
10-11-2003, 08:04 PM
I don't care what anyone else says, you are still too awsome. You've made my life a lot easier by helping me with this. Life's been tough lately, my mom died unexpectedly about 3 weeks ago and I've been using the coding to keep my mind off things. Thanks again...
jrbp
10-11-2003, 08:12 PM
Sorry to hear that. :(
casa
10-11-2003, 09:21 PM
Thanks for the condolences. She's in a much better place now.

Okay, so back to the javascript/php issue...

I went over to phpbuilder.com and did some research and found out that if I want the checked checkboxes to go over to php as an array, I have to do something like this:

<input type="Checkbox" name="s-1[]" value="Eng9-01A">
<input type="Checkbox" name="s-1[]" value="Eng9-02A">
<input type="Checkbox" name="s-1[]" value="Eng9-03A">The name="s-1[]" tells php that this is an array coming in. So, if I add the [] to the end of the checkbox name, the JavaScript doesn't work anymore. I'm working on it, but the book I have isn't very good, and even if it was, I'm not sure how to look this one up. Any good book recommendations?
jrbp
10-11-2003, 09:30 PM
I would reccomend books published by Sams Publishing (www.sams.com) they have a whole scetion on javascript books. Also just in case its not there(don't remember) a good one is: Javascript the Definate Guide
casa
10-11-2003, 09:34 PM
I have the WROX Beginning JavaScript book at work. I don't like it very much because the index isn't very good, which makes it hard to look stuff up. I just bought the Visual Quickstart Guide, JavaScript for the World Wide Web to keep at home. It was cheap ($21.99 - 10% BAM discount), but also pretty weak. I guess my biggest problem is that my abilities are in the beginning catagory, but my ideas are in the advanced catagory. I can think it up, I just can't code it yet. ;)
jrbp
10-11-2003, 09:36 PM
Oops, spelled it wrong, its JavaScript: The Definitive Guide, and its not on the sams web site because they didn't publish it. If you search for it in google you will be able to find it easily.
Dimitri
10-11-2003, 10:11 PM
I too had bought several books when first learning Javascript. But I found that all I really needed was one good reference book (with basic examples for each thing) and a good search engine which could lead me to the right Javascript forums or tutorial websites.

The rest was just a matter of taking someone else's code; tweaking it; picking it apart; and figuring out what everything did.

Good luck. And my condolences to you for the loss of your mom.

Dimitri
casa
10-11-2003, 11:12 PM
Dimitri,

Do you have any comments about adding the [] to the end of the name value. Since you are a jsp hacker, I figure that might not be something you have any experience with. Any ideas on where to go for further ideas? Thanks for all your help...
casa
10-11-2003, 11:32 PM
I don't know what happened. I tried it again and now it works! Guys, thank you so much for all your help.