title: How can I hide a checkbox in html?
body: <p>I want to hide a <code>checkbox</code>.<br />
  But also want that, when I click on label associated with corresponding <code>checkbox</code>, the <code>checkbox</code> should get checked/unchecked.</p>
  
  <p>I also want that the <code>checkbox</code> MUST be able to be focused.</p>
  
  <p>I am doing the following:</p>
  
  <pre><code>&lt;div class="menuitem"&gt;
      &lt;label class="checkbox"&gt;&lt;input type="checkbox" value="valueofcheckbox" style="display:none" checked="checked"&gt;Option Text&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem with above is, I am not able to make focus the <code>checkbox</code> when <code>style="display:none"</code>.</p>
  
  <p>To make <code>checkbox</code> focusable I am doing :</p>
  
  <pre><code>$('input', '.menuitem').focus();
  </code></pre>
  
  <p>IF POSSIBLE, how do I make the hidden <code>checkbox</code> focusable?</p>