Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Aug 2004
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy How do you change Checkbox values using JavaScript

    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>>>>

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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).
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #3
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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>

  • #4
    New Coder
    Join Date
    Aug 2004
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>>>>

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by Roy Sinclair; 10-28-2004 at 05:07 PM.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #6
    New Coder
    Join Date
    Aug 2004
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>>>>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •