隐藏复选框并使标签可单击。 JS

Question

如何隐藏原始复选框并使标签可单击并像复选框一样？我确信有一种方法可以在 JS 中做到这一点！我正在使用 PHP 加载标签和复选框，它们是动态加载的，并且总是可以不同，具体取决于用户在此页面之前选择的内容。谢谢！

                foreach ($row as $type) { ?>

                   <label for="<?php echo $type['id'] ?>" class="interests-span">

                        <h3><?php echo $type['Type'] ?></h3>

                    </label>

                    <input id="<?php echo $type['id'] ?>" type="checkbox" style="display:block;" value="<?php echo $type['Type']?>" name="options[]"/>

                    <?php

                }

Answer 1

注意：标签应与 id 或 name 链接。这是您想要的自定义实现。 但我认为选择仅包含值的复选框是不正确的foreach ($row as $type) { ?>&nbsp; &nbsp; &nbsp;<label for="<?php echo $type['Type'] ?>" class="interests-span"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; onclick="toggleCheckboxFromLabel('<?php echo $type['Type'] ?>')"&nbsp; &nbsp; &nbsp;>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3><?php echo $type['Type'] ?></h3>&nbsp; &nbsp; &nbsp;</label>&nbsp; &nbsp; &nbsp;<input type="checkbox" style="display:block;" value="<?php echo $type['Type']?>"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;name="options[]"/><?php } ?><script>function toggleCheckboxFromLabel(val){&nbsp; &nbsp; var checkbox = document.querySelector('input[type="checkbox"][value="' + val + '"]')&nbsp; &nbsp; checkbox.checked = !checkbox.checked;}</script>

Answer 2

只需添加一个等于 for 属性的 id 即可。$counter = 0;foreach ($row as $type) { ?>&nbsp; <label for="<?= 'checkbox_' . $counter ?>" class="interests-span">&nbsp; &nbsp; &nbsp; <h3><?php echo $type['Type'] ?></h3>&nbsp; </label>&nbsp; <input type="checkbox" style="display:none;" id="<?= 'checkbox_' . $counter ?>" value="<?php echo $type['Type']?>"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; name="options[]"/><?php&nbsp; &nbsp;$counter++;} ?>