Accessing a checkbox via JavaScript
Moderator: General Moderators
Accessing a checkbox via JavaScript
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.
<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.
-
microthick
- Forum Regular
- Posts: 543
- Joined: Wed Sep 24, 2003 2:15 pm
- Location: Vancouver, BC
You can access them as if each were an element in an array.
So, you could go:
So, you could go:
Code: Select all
<script language="Javascript">
document.myform.mycheckboxї1].value = 'New Value';
</script>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:
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.
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; }
}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.
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,
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.
Secondly,
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.htmlWhen I check CBX1 it should uncheck CBX2.
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;
}
}-
microthick
- Forum Regular
- Posts: 543
- Joined: Wed Sep 24, 2003 2:15 pm
- Location: Vancouver, BC
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.
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>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.
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.
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:
When the checkbox is selected, it will populate the value into the array so it can be easily parsed with PHP afterwards.
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>-
microthick
- Forum Regular
- Posts: 543
- Joined: Wed Sep 24, 2003 2:15 pm
- Location: Vancouver, BC