Page 1 of 1
Accessing a checkbox via JavaScript
Posted: Thu Sep 25, 2003 12:44 pm
by SBukoski
Let's say I have 10 checkboxes on my form. They are all setup such as this:
<input type="checkbox" name="cbarr[]" value="<?php $a ?>">
Where $a is a value between 1 and 10.
Using JavaScript, is there a way I can access a particular checkbox? I know if they were all named something different I could do it, but am unsure how to do it when they all have the same name as above.
Posted: Thu Sep 25, 2003 12:55 pm
by microthick
You can access them as if each were an element in an array.
So, you could go:
Code: Select all
<script language="Javascript">
document.myform.mycheckboxї1].value = 'New Value';
</script>
Posted: Thu Sep 25, 2003 1:23 pm
by SBukoski
I tried doing that and it didn't seem to work. I got an "... is null or not an object" message. I ended up looping through the elements array and modifying what I needed too that way.
FOr example, let's say I wanted the checkboxes to act as radio controls. When I check CBX1 it should uncheck CBX2. I know that my checkboxes on the form will always start at element 9 and 10 and for each loop I add 2. The next time they will be 11 and 12, respectively.
I created this function:
Code: Select all
function checkBx(curCbx, relCbx) {
if (document.frmchklst.elementsїcurCbx].checked == true) {
document.frmchklst.elementsїrelCbx].checked = false; }
}
I pass in the valkue in the elements list of the checkbox being clicked as well as the related checkbox that I want to make sure is unchecked.
Does anyone see any potential problems with doing it like this. Keep in mind that the checkboxes will ALWAYS begin at element position 9 the way the form is designed. If I cange it, I need to change the number.
Posted: Thu Sep 25, 2003 1:38 pm
by Unipus
First of all, to do this properly, your form elements should all have an ID in addition to a name. Javascript doesn't recognize objects by name, it recognizes them by ID, and without that you'll have a hard time specifying checkbox 9, 10 or anything else.
Secondly,
When I check CBX1 it should uncheck CBX2.
Are you just trying to code the functionality to do this? If so, stop! It's been built-in since HTML 1.0! It's called a radio button. Here's a quick tutorial:
http://www.faqs.org/docs/htmltut/forms/ ... RADIO.html
Finally, if you really must do it this way, here's a code snippet you might find useful (to loop through all checkboxes in a page... it would be easy to change it to only loop through a given form.) This example will uncheck every checkbox on a page.
Code: Select all
var theFormElems = document.getElementsByTagName('input');
for (var i = 0; i < theFormElems.length; ++i) {
if (theFormElemsїi].type == 'checkbox' && !theFormElemsїi].checked) {
theFormElemsїi].checked = false;
}
}
Posted: Thu Sep 25, 2003 1:40 pm
by microthick
What you've described above should work. I don't like the idea of using the elements array, but that's your choice.
The below code works perfectly in my browser and uses only the specific checkbox object's array. It uses your function, though possibly not as you had intended.
Code: Select all
<html>
<head>
<title>Untitled</title>
<script language="Javascript">
function checkBx(curCbx, relCbx) {
if (document.frmchklst.cbxїcurCbx - 1].checked == true) {
document.frmchklst.cbxїrelCbx - 1].checked = false;
}
}
</script>
</head>
<body>
<form name="frmchklst">
<input type="checkbox" name="cbx" value="1" onClick="checkBx(1,2)">
<input type="checkbox" name="cbx" value="2" onClick="checkBx(2,1)">
<input type="checkbox" name="cbx" value="3" onClick="checkBx(3,4)">
<input type="checkbox" name="cbx" value="4" onClick="checkBx(4,3)">
<input type="checkbox" name="cbx" value="5" onClick="checkBx(5,6)">
<input type="checkbox" name="cbx" value="6" onClick="checkBx(6,5)">
</form>
</body>
</html>
Posted: Thu Sep 25, 2003 1:56 pm
by SBukoski
Let me try and explain why I'm trying to get it to work this way. You then can smack me on the head if I'm being stupid. On my form I have a row of data. Each row will have two checkboxes, CBX1 and CBX2. There could be up to 30 rows on a form.
Now, I want to make sure for each row they can check only one of the two checkboxes. Sounds like a great use for a radiocontrol. However, when the form gets submitted on the PHP side, I want to determine which checkboxes were selected, and I'd like all the selected ones to be in an array to make things easy. Therefore, each Column of checkboxes needs to have the same name. For example, for all 30 rows the CBX1 checkbox will have the name CBX1[]. And for the second checkbox in each row it will be named CBX2[].
Now when I get into PHP I don't have to assume up to 30, I know exactly how many were slected and how many were checked.
Using a radio control for each I would need to do a loop in PHP up to 30 times. It just seemed easier and made more sense to do it with the checkboxes in this sense.
Now go ahead, tell me I'm a fool and show me the errors in my thinking.

Posted: Thu Sep 25, 2003 2:01 pm
by SBukoski
microthick,
I might not have been completely clear with my code, so I apologize. I should have posted some code, and I should know better by now. Anyways, here is an example of what a couple rows would look like on my form:
Code: Select all
<tr>
<td><input type="checkbox" name="arrhaveї]" value="P22"></td>
<td><input type="checkbox" name="arrignoreї]" value="P22"></td>
</tr>
<tr>
<td><input type="checkbox" name="arrhaveї]" value="N3"></td>
<td><input type="checkbox" name="arrignoreї]" value="N3"></td>
</tr>
When the checkbox is selected, it will populate the value into the array so it can be easily parsed with PHP afterwards.
Posted: Thu Sep 25, 2003 3:02 pm
by microthick
Ahh, I think I see what you're doing now. More complicated than I had originally thought.
Your method looks pretty solid.