/    Sign up×
Community /Pin to ProfileBookmark

radio buttons and checkboxes

Copy linkTweet thisAlerts:
Oct 10.2003

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…

to post a comment
JavaScript

18 Comments(s) ↴

Copy linkTweet thisAlerts:
@DimitriOct 11.2003 — 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>
Copy linkTweet thisAlerts:
@casaauthorOct 11.2003 — 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...
Copy linkTweet thisAlerts:
@DimitriOct 11.2003 — 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
Copy linkTweet thisAlerts:
@casaauthorOct 11.2003 — 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...
Copy linkTweet thisAlerts:
@DimitriOct 11.2003 — 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
Copy linkTweet thisAlerts:
@DimitriOct 11.2003 — 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
Copy linkTweet thisAlerts:
@casaauthorOct 11.2003 — 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>

[/quote]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.
Copy linkTweet thisAlerts:
@casaauthorOct 11.2003 — if there is only one checkbox for a radio button, then

[b]document.forms[0].elements[currentName].length[/b] 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]);

}

}

[/quote]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 [b]document.forms[0].elements[currentname][0] has no properties[/b] 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.
Copy linkTweet thisAlerts:
@DimitriOct 12.2003 — 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;}

}
Copy linkTweet thisAlerts:
@casaauthorOct 12.2003 — 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...
Copy linkTweet thisAlerts:
@jrbpOct 12.2003 — Sorry to hear that. ?
Copy linkTweet thisAlerts:
@casaauthorOct 12.2003 — 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:
[code=php]
<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">[/code]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?
Copy linkTweet thisAlerts:
@jrbpOct 12.2003 — 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
Copy linkTweet thisAlerts:
@casaauthorOct 12.2003 — 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. ?
Copy linkTweet thisAlerts:
@jrbpOct 12.2003 — 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.
Copy linkTweet thisAlerts:
@DimitriOct 12.2003 — 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
Copy linkTweet thisAlerts:
@casaauthorOct 12.2003 — 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...
Copy linkTweet thisAlerts:
@casaauthorOct 12.2003 — I don't know what happened. I tried it again and now it works! Guys, thank you so much for all your help.
×

Success!

Help @casa spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...