Categories: javascript, php, html

Hide check boxes and make labels clickable. JS

2 answers

How can I hide the original checkboxes and make the labels be clickable and act like checkboxes? I am sure there is a way to do it in JS! I am loading the labels and the checkboxes with PHP, they are loaded dynamically and can always be different, depending on what the user chooses prior to this page. Thanks!

                 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                 }  

enter image description here

All answers to this question, which has the identifier 61196976

The best answer:

Note: Labels should be linked with id or name.

Here is custom implementation what you want. But I don't think it is correct to select checkbox with only values

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> 

Just add an id equals to the for attribute.

$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++; } ?> 

Last questions

how do i remove the switch on my home screen?
how to edit the JS date and time to update atuomatically?
How to utilize data stored in a multidimensional array
Powermockito not mocking URL constructor in URI.toURL() method
Android Bluetooth LE Scanner only scans when phone's Location is turned on in some devices
docker wordpress container can't connect to mysql container
How can I declare a number in java that is more than 64-bits? [duplicate]
Optaplanner solutionClass entityCollectionProperty should never return null error when simple JSON object passed to controller
Anylogic, get the time a pedestrain is in a queue
How do I fix this syntax issue with my .flex file?
Optimizing query in PHP
How to find the highest number of a column and print two columns of that row in R?
Ideas on “Error: Type is referenced as an interface from”?
JCIFS SmbFile.exists() and SmbFile.isDirectory() return false when it exists and I can listFiles()
PHP total order
Laravel booking system design
neural net - undefined column selected
How to indicate y axis does not start from 0 in ggplot?
Fragments in backStack
Spinner how to change the data