Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to deal with browser differences with indeterminate checkbox
    primarykey
    data
    text
    <p><strong>Primer:</strong> An HTML checkbox can be set as <code>indeterminate</code>, which displays it as neither checked nor unchecked. Even in this indeterminate state, there is still an underlying boolean <code>checked</code> state.</p> <p><img src="https://i.stack.imgur.com/UlpJ8.png" alt="Mac OS X checkboxes in various states"></p> <hr> <p>When an indeterminate checkbox is clicked, it loses its <code>indeterminate</code> state. Depending on the browser (Firefox), it can additionally toggle the <code>checked</code> property.</p> <p><a href="http://jsfiddle.net/MLMep/9/" rel="noreferrer">This jsfiddle</a> illustrates the situation. In Firefox, clicking either of the checkboxes once causes them to toggle their initial underlying <code>checked</code> state. In IE, the <code>checked</code> property is left alone for the first click.</p> <p>I would like all browsers to behave the same, even if this means additional javascript. Unfortunately, the <code>indeterminate</code> property is set to false <em>before</em> the <code>onclick</code> handler (or <code>onchange</code> and jquery <code>change</code>) is called, so I can't detect whether it's called for a click on an <code>indeterminate</code> checkbox or not.</p> <p>The <code>mouseup</code> and <code>keyup</code> (for spacebar toggle) events show the prior <code>indeterminate</code> state, but I'd rather not be that specific: it seems fragile.</p> <p>I could maintain a separate property on the checkbox (<code>data-indeterminate</code> or similar), but I wanted to know if there's a simple solution I'm missing, and/or if other people are having similar issues.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload