codeofnode codeofnode - 6 months ago 11
Javascript Question

How can I hide a checkbox in html?

I want to hide a

checkbox
.

But also want that, when I click on label associated with corresponding
checkbox
, the
checkbox
should get checked/unchecked.

I also want that the
checkbox
MUST be able to be focused.

I am doing the following:

<div class="menuitem">
<label class="checkbox"><input type="checkbox" value="valueofcheckbox" style="display:none" checked="checked">Option Text</label>
</div>


The problem with above is, I am not able to make focus the
checkbox
when
style="display:none"
.

To make
checkbox
focusable I am doing :

$('input', '.menuitem').focus();


IF POSSIBLE, how do I make the hidden
checkbox
focusable?

Answer

Try setting the checkbox's opacity to 0. If you want the checkbox to be out of flow try position:absolute and offset the checkbox by a large number.

HTML

<label class="checkbox"><input type="checkbox" value="valueofcheckbox" checked="checked" style="opacity:0; position:absolute; left:9999px;">Option Text</label>