title: How to deal with browser differences with indeterminate checkbox
body: <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>