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

Question

我正在遍历一些复选框值并检查它们是否被选中并在代码中进一步发送一些值，但是那不是重点 - 运行良好。但是 - 出于样式目的，我想隐藏实际的复选框(我想仍然可以点击它，带有标签)。但是，隐藏它会使它不可检查。无论如何？隐藏实际的复选框但仍然可以这么说吗？

<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>

Answer 1

对于复选框，为什么不设置 opacity:0 ？还是 position:absolute; 和 left:-9999px？

任何链接的标签仍会按预期在点击时更改其值。

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;
}