Accessing a checkbox via JavaScript

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
SBukoski
Forum Contributor
Posts: 128
Joined: Wed May 21, 2003 10:39 pm
Location: Worcester, MA

Accessing a checkbox via JavaScript

Post 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.
microthick
Forum Regular
Posts: 543
Joined: Wed Sep 24, 2003 2:15 pm
Location: Vancouver, BC

Post 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&#1111;1].value = 'New Value';
</script>
SBukoski
Forum Contributor
Posts: 128
Joined: Wed May 21, 2003 10:39 pm
Location: Worcester, MA

Post 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) &#123;
    if (document.frmchklst.elements&#1111;curCbx].checked == true) &#123;
        document.frmchklst.elements&#1111;relCbx].checked = false;				    &#125;
&#125;
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.
Unipus
Forum Contributor
Posts: 409
Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA

Post 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) &#123;
					if (theFormElems&#1111;i].type == 'checkbox' && !theFormElems&#1111;i].checked) &#123;
						theFormElems&#1111;i].checked = false;
					&#125;
				&#125;
microthick
Forum Regular
Posts: 543
Joined: Wed Sep 24, 2003 2:15 pm
Location: Vancouver, BC

Post 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) &#123;
	if (document.frmchklst.cbx&#1111;curCbx - 1].checked == true) &#123;
		document.frmchklst.cbx&#1111;relCbx - 1].checked = false;
	&#125;
&#125;
</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>
SBukoski
Forum Contributor
Posts: 128
Joined: Wed May 21, 2003 10:39 pm
Location: Worcester, MA

Post 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. :)
SBukoski
Forum Contributor
Posts: 128
Joined: Wed May 21, 2003 10:39 pm
Location: Worcester, MA

Post 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&#1111;]" value="P22"></td>
  <td><input type="checkbox" name="arrignore&#1111;]" value="P22"></td>
</tr>
<tr>
  <td><input type="checkbox" name="arrhave&#1111;]" value="N3"></td>
  <td><input type="checkbox" name="arrignore&#1111;]" 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.
microthick
Forum Regular
Posts: 543
Joined: Wed Sep 24, 2003 2:15 pm
Location: Vancouver, BC

Post by microthick »

Ahh, I think I see what you're doing now. More complicated than I had originally thought.

Your method looks pretty solid.
Post Reply