changing ''checked' attribute of a checkbox using javascript

Question

right now when it first loads the html page, my checkbox was created in this way:

<input type="checkbox" id="CBOX1" name="CBOX1" onclick="onCBOX(this)" disabled/>

in a function in on the same html:

boolean checked = true;
document.theForm.elements['CBOX1'].checked = true;

For some reason, the checked box value is not checked when the function is called later on the page. Is it because when i first created the checkbox, i created it without a 'checked' attribute? And then when i assign it a value, the element doesnt seem to include the checked attribute anymore as when i check on the source of the page. its still the same...

<input type="checkbox" id="CBOX1" name="CBOX1" onclick="onCBOX(this)" disabled/>

For simplicity sake, i know for sure that there were changes made to other attributes of this element using AJAX, but i am at a loss to WHY the checked attribute is not carried over... What's the alternative?

Is checked a variable? If yes, where is it defined? What value does it have? You have to assign a boolean value to document.theForm.elements['CBOX1'].checked. — Felix Kling
– Felix Kling, Commented Aug 21, 2012 at 15:36
Where does checked come from in that first line of JavaScript? The checked property of a checkbox is supposed to be a boolean, true or false, value. — Anthony Grist
– Anthony Grist, Commented Aug 21, 2012 at 15:37
possible duplicate of How do I check a checkbox with jQuery or JavaScript? — Travis J
– Travis J, Commented Aug 21, 2012 at 16:44

Travis J · Accepted Answer · 2012-08-21 16:38:56Z

9

Check the checkbox:

document.theForm.elements['CBOX1'].checked = true;
document.theForm.elements['CBOX1'].checked = "checked";

Uncheck the checkbox:

document.theForm.elements['CBOX1'].checked = false;

If you want it unchecked on load then don't touch it, by default it is unchecked.

Moreover, no click events will be registered if you use the disabled attribute on your input field.

See this jsfiddle for an example.

EDIT

If clickability is not the issue then just do what I already pointed out. Here is a full working example.

<html>
 <head>
 </head>
 <body>
  <input id="tar" type="checkbox" disabled />
  <input type="checkbox" onclick="callFunc(this)" />
  <script type="text/javascript">
   function callFunc(elem){
    document.getElementById("tar").checked = elem.checked;
   }
  </script>
 </body>
</html>

edited Aug 21, 2012 at 16:38

answered Aug 21, 2012 at 15:42

Travis J

82.5k43 gold badges213 silver badges280 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

bouncingHippo Over a year ago

i need it unchecked when the page loads ie via <input checkbox ....> and then after user plays with it, the function will ADD a 'checked' attribute to it..

Travis J Over a year ago

@bouncingHippo - If you want the user to interact with your input element then remove the disabled attribute.

bouncingHippo Over a year ago

clickability is not the issue here, when i first create the checkbox <input checkbox..> it doesnt have a 'checked' attribute. later on, i use document.theForm....checked=true doesnt seem to work as checking the page source shows that <input checbox...> is still MISSING the checked attribute even after the function is called on it...

Travis J Over a year ago

@bouncingHippo - You must be doing it wrong. See edit for a clear working example of the previously stated attribute settings in action. Debug your code better before making false assumptions or developing could take a LONG time. MOREOVER, checking the page source only shows what the state of the page was when it loaded.

bouncingHippo Over a year ago

youre right i fixed the problem using your advice. thanks and please upvote the problem, appreciate it

|

D'Arcy Rittich · Accepted Answer · 2012-08-21 15:37:09Z

0

Try setting it to true instead:

document.theForm.elements['CBOX1'].checked = true;

answered Aug 21, 2012 at 15:37

D'Arcy Rittich

172k41 gold badges298 silver badges287 bronze badges

2 Comments

bouncingHippo Over a year ago

i cannot set it to true first as our client wants it to be checked=false when the page first loads, and depending on incoming data, it will checked=true....

D'Arcy Rittich Over a year ago

Then set the value true based on the incoming data. Not sure what your issue is here.

Uchenna Nwanyanwu · Accepted Answer · 2012-08-21 15:38:27Z

0

Try this, not tested anyway.

document.theForm.elements['CBOX1'].checked = true;

answered Aug 21, 2012 at 15:38

Uchenna Nwanyanwu

3,2243 gold badges39 silver badges59 bronze badges

3 Comments

bouncingHippo Over a year ago

i cannot set it to true first as our client wants it to be checked=false when the page first loads, and depending on incoming data, it will checked=true....

Uchenna Nwanyanwu Over a year ago

Then change true to false. i.e. document.theForm.elements['CBOX1'].checked = false;. Hope this solves ur problem cos i'm not clear what you want to achieve.

bouncingHippo Over a year ago

in other words <input checkbox...id=... checked='false'> ?

Collectives™ on Stack Overflow

changing ''checked' attribute of a checkbox using javascript

3 Answers 3

6 Comments

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related