9

Here's my HTML:

<input id="test" type="checkbox" checked="">

Here's a Firebug excerpt:

>>> test
<input id="test" type="checkbox" checked="">

>>> test.checked = false
false

>>> test
<input id="test" type="checkbox" checked="">

Um...am I missing something, or should that last line not read the following?

<input id="test" type="checkbox">

UI-wise, the checkbox does indeed uncheck when I execute the checked = false line.

Anyway, if there's some legitimate explanation for this, then what's the proper way to uncheck a checkbox from JavaScript, if not checked = false?

Andreas Bonini
  • 44,018
  • 30
  • 122
  • 156
Kev
  • 15,899
  • 15
  • 79
  • 112
  • 2
    You probably should not care what Firebug says as long as the data gets to your server and the UI behaves as expected. – Josh Stodola Dec 04 '09 at 22:23
  • This is just to demonstrate what I'm talking about. The real problem is that I have CSS that I want to have an effect based on whether the checkbox is checked or not, and it only does its job when I click the checkbox, not when I set `.checked`. – Kev Dec 07 '09 at 14:30

3 Answers3

24

The value attribute of input type="text" and the checked or selected attributes of input type="checkbox", radio and option correspond to the initial value of the form field, not the current value the user or script has set. Consequently changing the checked property does not alter the attribute value, and setting the checked attribute does not alter the real visible value that's going to be submitted with the form.

The checked="checked" attribute corresponds to the defaultChecked DOM property, not the checked property. Similarly, the value="..." attribute corresponds to defaultValue.

(Note there are IE gotchas here due to IE not knowing the difference between a property and an attribute.)

Justin Johnson
  • 30,978
  • 7
  • 65
  • 89
bobince
  • 528,062
  • 107
  • 651
  • 834
  • I never mentioned the `value` attribute. My test checkbox doesn't even have one. So I'm not sure how your first paragraph applies, but the defaultChecked property was key. Thanks! – Kev Dec 07 '09 at 14:43
  • It's background: checked/defaultChecked is the special case of value/defaultValue for checkboxes (similarly selected/defaultSelected for options). – bobince Dec 07 '09 at 14:55
  • Kev, your question is about what is being reported by Firebug. The entirety of bobince's original answer is relevant. Also, additional information is never bad. – Justin Johnson Dec 07 '09 at 21:44
  • Please read my question and show me where I mention the `value` attribute. As for Firebug see my comment on the question. – Kev Dec 11 '09 at 20:00
-2

You may be expecting Firebug to display value information similarly to how style is updated in the HTML inspection pane. However, input, select, option, and textarea do not behave the same way and values will not be updated in this pane and will always display the original values (those at page render time). If the UI is updating, then you know you're doing it right.

Justin Johnson
  • 30,978
  • 7
  • 65
  • 89
  • This just isn't true. Try it yourself with an HTML element `a` with no value attribute--run the lines `a`, `a.value=7`, and `a` again. – Kev Dec 07 '09 at 14:40
  • Sorry, what I said still stands, but I should clarify that `a` was a JavaScript variable pointing to an HTML `input` elemnt. It probably came across as if I meant an anchor tag. – Kev Dec 11 '09 at 20:02
  • It did come across that way, but I've delete that comment as it is no longer necessary. However, I don't understand the scenario that you are trying to describe in your first comment, particularly with "and `a` again" – Justin Johnson Dec 11 '09 at 23:05
  • I sure get confused with this comment deletion...makes it difficult to understand the ones that remain. Anyway, the second time you execute `a` on the firebug command line is to see the difference in `a` that `a.value=7` made... – Kev Aug 10 '10 at 13:03
-3

checked = '', is correct I believe. I suspect the browser is trying to be friendly when you do checked = false and doing the equivalent action, checked = ''.

Jonathon Faust
  • 12,396
  • 4
  • 50
  • 63
  • 2
    Tried it. Doesn't seem to change the outcome. Also according to https://developer.mozilla.org/en/XUL/checkbox , the checked property is a boolean type. – Kev Dec 04 '09 at 21:56
  • Maybe I'm confused. Is something not working how you expect? – Jonathon Faust Dec 04 '09 at 22:03
  • Sorry, I had tried to express that in the question. I expect setting the `.checked` property to have an effect on the HTML attribute (especially since it has an effect on the UI.) But the HTML attribute does not change, no matter what it's initially set to. This seems pretty inconsistent. – Kev Dec 04 '09 at 22:06
  • 2
    @Kev: make sure you're looking at the right documentation. You linked to the XUL docs there. – nickf Dec 07 '09 at 14:57
  • @nickf: Oops, you're absolutely right! In the right docs ( https://developer.mozilla.org/en/DOM/Input ) it's the same, though. – Kev Dec 11 '09 at 20:04