隐藏复选框并使标签可单击。 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) { ?>

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

        onclick="toggleCheckboxFromLabel('<?php echo $type['Type'] ?>')"

     >

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

     </label>

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

           name="options[]"/>

<?php } ?>

<script>

function toggleCheckboxFromLabel(val){

    var checkbox = document.querySelector('input[type="checkbox"][value="' + val + '"]')

    checkbox.checked = !checkbox.checked;

}

</script>

Answer 2

只需添加一个等于 for 属性的 id 即可。

$counter = 0;

foreach ($row as $type) { ?>

  <label for="<?= 'checkbox_' . $counter ?>" class="interests-span">

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

  </label>

  <input type="checkbox" style="display:none;" id="<?= 'checkbox_' . $counter ?>" value="<?php echo $type['Type']?>" 

        name="options[]"/>

<?php

   $counter++;

} ?>