Why Button inside Label does not work. Button does not work as expected does not activate Checkbox

Question

Why Button inside Label does not work. Button does not work as expected does not activate Checkbox

Navigation

#1 by (3 votes)

4

I was making a Menu that only appears when a checkbox is checked. And to change the status of this checkbox I need to click on label of it, since input:checkbox is actually hidden.

What happens is that within label I put a button , and thus I can not activate checkbox ... See that according to the documentation within label all Phrasing_content link

About Phrasing Content

Notice that here I have the codes, one that does not work with button inside, and another one that works without button .

So why does label like button not activate checkbox ?

li{
  display: inline-block;
  background-color: red;
}
nav {
  display: none;
}
[type="checkbox"] {
  display: none;
}
[type="checkbox"]:checked + nav {
  display: block;
}
label {
  cursor:pointer;
}

<label for="btnx"><button>button</button></label>
<input type="checkbox" name="" id="btnx">
<nav>
  <ul>
    <li>item 01</li>
    <li>item 02</li>
    <li>item 03</li>
  </ul>
</nav>
<br><br>
<label for="btny">label</label>
<input type="checkbox" name="" id="btny">
<nav>
  <ul>
    <li>item 04</li>
    <li>item 05</li>
    <li>item 06</li>
  </ul>
</nav>

html html5

asked by anonymous 28.12.2018 / 14:27

1 answer

Login panel does not return the number of accounts Sum returns NaN for values above 999

score 3 · Accepted Answer

The problem is that <label> has only one interactive child, and by default, interaction with those elements should not turn on <label> . See the HTML Standard section:

The label element's exact default presentation and behavior, in particular what its activation behavior might be, if anything, should match the platform's label behavior. The activation behavior of a label element for events targeted to the interactive content of a label element, and any descendants of those interactive content descendants, must be of the nothing.

In free translation, "the exact default presentation and behavior of the <label> element, in particular what its activation behavior should be, must correspond to the behavior of the <label> of the platform. <label> for events intended for interactive content descendants of a label element and any descendants of those descendants of interactive content should be doing nothing . " >

That is, clicking the button within <label> does not activate the <label> click, as well as no interactive elements:

Alvo: <input type="checkbox" id="check">

<div>
  <p>Teste com o campo de texto:</p>
  <label for="check">
    <input type="text">
  </label>
</div>

<div>
  <p>Teste com o campo de checkbox:</p>
  <label for="check">
    <input type="checkbox">
  </label>
</div>

<div>
  <p>Teste com o campo de radio:</p>
  <label for="check">
    <input type="radio">
  </label>
</div>

Notice that no interaction with elements within <label> activates checkbox selection.

Interestingly this is not a problem with the target of <label> , because if we check the value of the control attribute in JavaScript, which has a reference to the target element, we will see that it will be <input type="checkbox"> itself as we define it with attribute for .

const label = document.querySelector('label[for="btnx"]');

console.log(label.control);

li{
  display: inline-block;
  background-color: red;
}
nav {
  display: none;
}
[type="checkbox"] {
  display: none;
}
[type="checkbox"]:checked + nav {
  display: block;
}
label {
  cursor:pointer;
}

<label for="btnx"><button>button</button></label>
<input type="checkbox" name="" id="btnx">
<nav>
  <ul>
    <li>item 01</li>
    <li>item 02</li>
    <li>item 03</li>
  </ul>
</nav>
<br><br>
<label for="btny">label</label>
<input type="checkbox" name="" id="btny">
<nav>
  <ul>
    <li>item 04</li>
    <li>item 05</li>
    <li>item 06</li>
  </ul>
</nav>