2

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?

bouncingHippo
  • 5,940
  • 21
  • 67
  • 107
  • 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 Aug 21 '12 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 Aug 21 '12 at 15:37
  • Is `checked` a defined boolean var that is true or false ? – mplungjan Aug 21 '12 at 15:37
  • Lol. 3 ppl with the same question – mplungjan Aug 21 '12 at 15:37
  • Either use `"checked"` or `true`. – João Silva Aug 21 '12 at 15:38
  • When you check the source of the page does it really say `" name="<%="CBOX1"%>" onclick="onCBOX(this)" disabled/>`. ie the HTML in the browser has those attributes with `<%=...%>` in them? If so then this is your problem... – Chris Aug 21 '12 at 15:44
  • @João: No. The `checked` property is always boolean, setting it to `"checked"` would only lead to a type cast to `true` – Bergi Aug 21 '12 at 15:45
  • Or it might be that your checkbox is disabled. I don't know if you might be having problems with changing the state of a disabled control... – Chris Aug 21 '12 at 15:45
  • @bouncingHippo: There are no `click` events fired on disabled form elements: http://stackoverflow.com/a/1680625/1048572 – Bergi Aug 21 '12 at 15:47
  • @Bergi: http://www.w3.org/TR/html-markup/input.checkbox.html – João Silva Aug 21 '12 at 15:47
  • @João: That spec is for the `checked` *attribute*, and that has no `true` value… The DOM *property* is `boolean` – Bergi Aug 21 '12 at 15:52
  • @Chris, i have no problem changing the state of the disabled. again, i have a input checkbox without a 'checked' attribute, and i want to use javascript function to modify the DOM property of checked but viewing the source shows that the input checkbox doesnt have a 'checked' attribute – bouncingHippo Aug 21 '12 at 15:57
  • @bouncingHippo: that was the least of the concerns. Try addressing questions such as whether you have `<%=%>` in the HTML of your page. The HTML source not having the attribute doesn't mean anything (except that it is not set). – Chris Aug 21 '12 at 16:02
  • no i dont have the <%=%> in my pages – bouncingHippo Aug 21 '12 at 16:02
  • 1
    possible duplicate of [How do I check a checkbox with jQuery or JavaScript?](http://stackoverflow.com/questions/426258/how-do-i-check-a-checkbox-with-jquery-or-javascript) – Travis J Aug 21 '12 at 16:44
  • hey @bouncingHippo I can feel your pain. You are asking a specific question and you get all the wrong answer. Did you manage to find a way to set the attribute in the html, not just the property of the element in the memory? – kmitov Oct 13 '21 at 06:27

3 Answers3

7

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>
Travis J
  • 81,153
  • 41
  • 202
  • 273
  • i need it unchecked when the page loads ie via and then after user plays with it, the function will ADD a 'checked' attribute to it.. – bouncingHippo Aug 21 '12 at 15:43
  • @bouncingHippo - If you want the user to interact with your input element then remove the disabled attribute. – Travis J Aug 21 '12 at 15:49
  • clickability is not the issue here, when i first create the 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 is still MISSING the checked attribute even after the function is called on it... – bouncingHippo Aug 21 '12 at 15:59
  • @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*. – Travis J Aug 21 '12 at 16:40
  • youre right i fixed the problem using your advice. thanks and please upvote the problem, appreciate it – bouncingHippo Aug 21 '12 at 18:55
  • @bouncingHippo - I cannot change the vote unless the question is edited (http://meta.stackexchange.com/a/5213/178816). However, I will not reverse the vote unless the question is made unique - it is currently an exact duplicate of http://stackoverflow.com/q/426258/1026459 in that all it is asking for is to change the checked value of a checkbox through javascript. – Travis J Aug 21 '12 at 19:23
0

Try setting it to true instead:

document.theForm.elements['CBOX1'].checked = true;
D'Arcy Rittich
  • 167,292
  • 40
  • 290
  • 283
  • 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.... – bouncingHippo Aug 21 '12 at 15:39
  • 1
    Then set the value `true` based on the incoming data. Not sure what your issue is here. – D'Arcy Rittich Aug 21 '12 at 15:42
0

Try this, not tested anyway.

document.theForm.elements['CBOX1'].checked = true;
Uchenna Nwanyanwu
  • 3,174
  • 3
  • 35
  • 59