dwyl / learn-html5

:earth_africa: Learn how to use HTML5 (from scratch) to build websites/web applications!
GNU General Public License v2.0
35 stars 8 forks source link

label with nested div? #43

Open SimonLab opened 5 years ago

SimonLab commented 5 years ago

I'm trying to make an input checkbox checked when clicking on a div, something similar to:

<div>
  <p>Paragraph inside the div</p>
  <input type="checkbox" id="my-checkbox">
</div>

My first idea was to wrap the div inside a label where the for attribute reference the id of the checkbox:

<label for="my-checkbox">
  <div>
    <p>Paragraph inside the div</p>
    <input type="checkbox" id="my-checkbox">
  </div>
</label>

However this is not html valid as label can't have nested element (other than the element targeted by the for attribute, ie the checkbox): https://stackoverflow.com/questions/20834755/standards-on-behaviour-of-nested-labels

One solution is to use javascript to check the checkbox with a click event handler on the div.

However I'm looking for a solution without javascript.