title: Toggle checked on checkbox when spacebar is pressed
body: <p>I have a small snippet of code which I use to toggle the <code>checked</code> property of a checkbox when the <kbd>space bar</kbd> is pressed.</p>
  <pre><code>$(document).on('keydown', function(e) {
    if (e.which === 32) {
      e.preventDefault();
      $('#example').prop('checked', function() {
        return !this.checked;
      });
    }
  });
  </code></pre>
  <p>The above works fine in Chrome v30 and IE10, but not in Firefox v24. The problem occurs when you <strong>click</strong> the checkbox, and then use the space bar to toggle it, it momentarily checks it, and then unchecks it, and vice versa.</p>
  <p>I believe the problem has something to do with the fact that the <code>click</code> event is triggered in Firefox when using <code>keydown()</code>, despite using <code>e.preventDefault()</code> (which prevents the click event from triggering in both Chrome and IE).</p>
  <p>I tried using the same code, binding the <code>keyup</code> event. This fixed the problem in Firefox, but then introduced the same problem to IE.</p>
  <h3><a href="http://jsfiddle.net/3pmvw/8/" rel="nofollow noreferrer">Here's the fiddle where Firefox is affected</a></h3>
  <p>Does anybody know why this is happening, and how I can get around it?</p>