admin管理员组

文章数量:1208155

I want to use the indeterminate property of a checkbox. Changing the value in JavaScript works in all sorts of browsers (even MSIE6!), however, I cannot set the initial value via HTML attributes in any.

Is this by design? If so, why? On server side, I can determine that it's indeterminate. So, why can't I tell the browser? Weren't browser vendors worried about FOUCs (Flashes Of Unstyled Content) if a long-running script holds up the property-setting?

Here's a working example: /

I want to use the indeterminate property of a checkbox. Changing the value in JavaScript works in all sorts of browsers (even MSIE6!), however, I cannot set the initial value via HTML attributes in any.

Is this by design? If so, why? On server side, I can determine that it's indeterminate. So, why can't I tell the browser? Weren't browser vendors worried about FOUCs (Flashes Of Unstyled Content) if a long-running script holds up the property-setting?

Here's a working example: http://jsfiddle.net/KUQC9/1/

Share Improve this question edited Feb 21, 2012 at 14:31 Drew Gaynor 8,4725 gold badges41 silver badges53 bronze badges asked Feb 20, 2012 at 18:03 Olson.devOlson.dev 1,8363 gold badges21 silver badges39 bronze badges 4
  • What's the indeterminate property? – gen_Eric Commented Feb 20, 2012 at 18:04
  • @Rocket, look at the working example. – Olson.dev Commented Feb 20, 2012 at 19:04
  • 1 I'm just learning about this now. I have a question for you, actually... you said you can determine that it's indeterminate on the server: how do you do that? (By the way, you could largely avoid FOUCs by using the DOM-load event rather than a timeout - jsfiddle.net/Cd35L - or even sooner - jsfiddle.net/dV3uL ) – M Miller Commented May 10, 2013 at 16:58
  • I had a tree construct stored on the server. I basically restored the state from the last time the form containing nested checkboxes was submitted. That is, while building the form, if a node was unchecked previously, I recurse the tree looking for any checked children. If any children are checked, the parent is indeterminate. Regarding the FOUCs, my tree was somewhat large -- any larger and I would've been concerned w/the possibility of a FOUC. – Olson.dev Commented May 10, 2013 at 22:03
Add a comment  | 

2 Answers 2

Reset to default 14

You can't make a checkbox indeterminate through HTML by design. See this article on css-tricks.com, which discusses the topic in depth.

As for the "why" part of your question, there is some information on the W3C mailing lists that may be helpful:

  • It looks as if the idea of giving checkboxes a tri-state value (seemingly checked, unchecked, indeterminate) was considered, but not implemented because of backwards-compatibility issues
    • See this message
    • And the response
  • The only mention of a true indeterminate HTML "content" attribute, as you show in your example, that I could find was here:
    • In this message
    • And the response
    • You might try contacting those involved in that thread for more information

For what it's worth, there is in fact an :indeterminate CSS selector (it seems to be treated like other CSS pseudo-classes like :visited, which also cannot be set through HTML directly, so maybe that is another reason indeterminate can't be either). In its demo of the CSS selector the W3C itself uses about the same approach that you do: W3C indeterminate CSS selector demo. In light of that, I'd say you're using about the best method available for setting the indeterminate state of a check box

It is by design. The only HTML way to denote checkbox state is through the checked attribute; this is because checkbox is meant to true/false, rather than true/false/unknown. Marking something indeterminate can be done via Javascript, but it will not change the actual/sumbitted value of the checkbox.

If you really want to initialize checkboxes to indeterminate, you'll need to do it with Javascript (I would imagine on the load event).

本文标签: javascriptHTMLWhy isn39t indeterminatequotindeterminatetruequot respectedStack Overflow