How do you change Checkbox values using JavaScript

skylab · 10-27-2004, 09:22 PM

I've been searching for help on this but to no avail. After several hours of frustration, my brain is shot.

I have a checkbox that has values already, like:

<input type="checkbox" name="Test" value="One">One<br>
<input type="checkbox" name="Test" value="Two">Two<br>
<input type="checkbox" name="Test" value="Three">Three<br>

I'm looking to change these values. I have tried using this code to change a value:

document.forms[0].Test[0].value = "One Plus More"

It changes the value, but not the actual displayed value. I can't seem to discover the actual way to change the entire option, including the displayed value.

On top of this, I pretty much just want to be able to change existing values as well as add additional values to a checkbox. Any help and examples are greatly appreciated. Thanks for your help and your time.

<<<<TIM>>>>

Roy Sinclair · 10-27-2004, 09:48 PM

By "changing the value" are you talking about checking or unchecking the box or about altering the text you're displaying after the checkbox (which it should be noted isn't part of the <input> tag).

hemebond · 10-27-2004, 10:16 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>46715</title>
	</head>
	<body>
		<form id="form" action="" method="get">
			<dl>
				<dt><label for="chk_1">One</label></dt>
				<dd><input id="chk_1" name="test[]" type="checkbox" value="one"></dd>
				<dt><label for="chk_2">Two</label></dt>
				<dd><input id="chk_2" name="test[]" type="checkbox" value="two"></dd>
				<dt><label for="chk_3">Three</label></dt>
				<dd><input id="chk_3" name="test[]" type="checkbox" value="three"></dd>
			</dl>
			<div><input type="submit"></div>
		</form>
	</body>
	<script type="text/javascript">
		var inputs = document.getElementById("form").getElementsByTagName("input");
		var labels = document.getElementById("form").getElementsByTagName("label");

		inputs[2].value = "five";
		labels[2].replaceChild(document.createTextNode("Five"), labels[2].firstChild);
	</script>
</html>

skylab · 10-27-2004, 10:20 PM

Yes, you are correct, the display text is not part of the input tag. Thanks for pointing that out, however, the question still stands, does anyone know a way to modify the value of the checkbox items after they are already composed? I don't need to check or uncheck them, that's the easy part, but actually changing the value after it's composed, that is what has me stumped.

Anyone...anyone...Bueller...Bueller

Thanks again.

<<<<TIM>>>>

Roy Sinclair · 10-28-2004, 04:05 PM

Did you even examine what Hemebond posted? It does indeed do what you asked for though it does it as the page loads and not as a result of a user action. It also displays the right way to associate text with a form field by using the label tag. If you examine that code and learn how it works you will indeed have learned some useful information that'll help you both now and in the future.

Don't hesitate to ask about anything in it that you don't understand.

skylab · 10-28-2004, 05:08 PM

Thanks to everyone who have helped so far. I have looked over the code Hemebond

posted and have a few questions:

If a checkbox data structure already exists on the form as I showed above, can one change its current values as well as add to it? If I cannot use the existing structure that's ok, but I really need to be able to compose a checkbox, or at least add additional values to it. The code posted by Hemebond shows how to modify values in checkbox items that already exist, but can I expand the length of the checkbox and populate another new value?

If I have a check box:

1
2
3

Can I create more values in the list:

1
2
3
4
5

etc...?

This list has to also compose from a field in another window as the child window loads, but I believe I can figure that out if I can determine how to add additional items to the checkbox.

Thanks again for your understanding and help.

<<<<TIM>>>>