why label inside label for two element not working

Question

In my code, label "Two" for second input set in label "One" for first input, but when click to label "Two", then first input not activated.

HTML:

<input type="checkbox" id="inp_one">
<input type="checkbox" id="inp_two">
<div>
  <label for="inp_one">
    <h1>One</h1>
    <label for="inp_two">
      <h1>Two</h1>
    </label>
  </label>
</div>

My code: https://jsfiddle.net/5x6ytk3g/

i want when click label "Two" then activate for both input.

Answer 1

I think that you need to use JavaScript:

document.getElementById("inp_two").onchange = function(){

    document.getElementById("inp_one").checked = this.checked;

};

https://jsfiddle.net/5x6ytk3g/1/
I tried it. Good luck VN!