2

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>
Brian Langhoff
  • 151
  • 2
  • 3
  • 13

3 Answers3

4

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;
}
SW4
  • 69,876
  • 20
  • 132
  • 137
  • 1
    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 Nov 22 '13 at 11:32
  • 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. – Ziumper Apr 01 '20 at 14:39
3
<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;
}
Bipin Kumar Pal
  • 1,009
  • 2
  • 8
  • 16
  • 1
    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 Nov 22 '13 at 11:33
1

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.

Alexandru Diacov
  • 1,181
  • 14
  • 15
  • 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 Nov 22 '13 at 11:32