HTML checkboxes: can you have a hidden checkbox that is still working normally (being set /unset via a label)?

Question

I'm iterating thru some checkbox values and checking if they are checked and sending some values furter on in the code, however thats beside the point - working well. BUT - for styling purposes I would like to HIDE the actual checkbox (can still click it, I assume, with the label). Hiding it, however, makes it not checkable. Anyway around that? Hiding the actual checkbox but still using it so to speak?

<label>
<div class="filterChoices" onClick="showhide(\'checkedIconProd'.$prodid.'\');ajaxcall(\'filtereditems\', \'updateItemsFromFilter.php?filterno=3&no='.$this->pageContent->getNo().'&sub='.$this->pageContent->getSub().'&sub2='.$this->pageContent->getSub2().'&producer='.$_GET["producer"].'&category='.$_GET["category"].'&segment='.$_GET["segment"].'&shopid='.$_GET["shopid"].'&varemenu='.$_GET["varemenu"].'&q=\'+getCheckBoxValues(\'producerfilter\'));return(false);"><input autocomplete="off" type="checkbox" name="producerfilter" value="'.$prodid.'" id="producerfilter'.$prodid.'" style="display:none;">
     '.$prodname.'
<span align="right" style="text-align:right;">
<img id="checkedIconProd'.$prodid.'" border="0" src="img/checkedIcon.png" style="display:none;">
</span>
</div>
</label>

Solution 1

For the checkbox, why not set the opacity:0 ? Or position:absolute; and left:-9999px?

Any linked label will still change its value on click as expected.

HTML

<label for="checkBoxOne">Label for checkBoxOne</label>
<input class='hidden' type="checkbox" id="checkBoxOne" name="checkBoxOne"  />

CSS

.hidden{
  opacity:0;
  /*  OR   */
  position:absolute;
  left:-999px;
}

Solution 2

<label for="checkBoxOne">Label for checkBoxOne</label>
<input class='checkbox' type="checkbox" id="checkbox" name="checkbox"  />

.checkbox{
    display:inline-block;
    opacity:0;
    /*or*/
    text-indent:9999px;
}

Solution 3

Yes this works. Link label and checkbox by id and then you click on label checkbox will be checked.

<label for="myCheckbox">Label</label>
<input type="checkbox" id="myCheckbox" name="" value="" />

or put checkbox inside the label.

Comments

[Brian Langhoff]

thanks for the speedy replies, and actually probably all very valid points. However, found after trying different things that my onclick event on the div negated the setting of the checkbox. So instead I removed the label completely and wrote a small javascript function that switched the checkbox value. And with this "display:none" works fine.

[Brian Langhoff]

thanks for the speedy replies, and actually probably all very valid points. However, found after trying different things that my onclick event on the div negated the setting of the checkbox. So instead I removed the label completely and wrote a small javascript function that switched the checkbox value. And with this "display:none" works fine.

[Brian Langhoff]

thanks for the speedy replies, and actually probably all very valid points. However, found after trying different things that my onclick event on the div negated the setting of the checkbox. So instead I removed the label completely and wrote a small javascript function that switched the checkbox value. And with this "display:none" works fine.

[Ziumper]

also on safari if you will use this position absolute and checkbox is required, the default required message will float all over the place trying to find required input.