Check box does not work if there is an anchor element in the label element

Question

I wanted to put the a element of the in-page link in the label element so that the check box would switch with each movement in the page.

So first I wrote this code:

div {
  width: 100px;
  height: 50px;
  background: #121;
}

<input type="checkbox" id="correct">

<label for="correct">text</label>

<div></div>

<label for="correct">teeeext</label>

This was done by clicking on each label and switching the checkbox.

However, when I created a code with a link inside the label element, the check box stopped working.

div {
  width: 100px;
  height: 50px;
  background: #121;
}

<input type="checkbox" id="correct">

<label for="correct"><a href="#link1">not work!</a></label>

<div></div>

<label for="correct">work!</label>

<label for="correct"><a href="#link2">not work!</a></label>

As a result of the search, I found a similar question but no solution was written about using the in-page link.

javascript - <a> tag inside <label> tag not triggering checkbox - Stack Overflow

What CSS do I need to toggle the checkboxes when using in-page links within the label element?

Links are supposed to go somewhere...not perform actions. Why are you using a link in the first place? — Paulie_D, Apr 04 '19 at 15:30
The other question says it is forbidden to have an `a` in a `label`, so what you are doing is simply incorrect. That is why there is no answer. — Mr Lister, Apr 04 '19 at 15:36
@Paulie_D There are elements that you want to change the display by the check box. And I want to change the display when the link in the page is clicked. Also, in-page links are linked to sections in the page. — scuregen, Apr 04 '19 at 15:41
Well you can't have both. Either the link actually goes somewher OR it perfoms an action. As its stands you have invalid HTML and I suggest you re-think your methodology. — Paulie_D, Apr 04 '19 at 15:43
@MrLister The label element allows phrasing content ([MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)). Also, the a element is phrasing content, which allows all elements that accept phrasing content as a parent element ([MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)). Therefore I think that it is possible to put an a element in the label element(it is not possible to put a label element in the a element). — scuregen, Apr 04 '19 at 16:07
@Paulie_D I think this is not invalid HTML from the content category. How is invalid HTML? — scuregen, Apr 04 '19 at 16:08
It allows "phrasing content" but NOT "interactive content"...like an `a` link. As I said, you can only have one interaction. Either it's a link or it performs an action NOT both. — Paulie_D, Apr 04 '19 at 16:11
@Paulie_D The `a` element is "phrasing content" and "interactive content". In this case, the a element should be permitted as a child element of the label element. At this time, does an element lose its property as "interactive content"? it was not possible to find a description of the operation in MDN. Where is the behavior written? — scuregen, Apr 04 '19 at 16:25
"but no solution was written about using the in-page link" at least two of the answers there provide solutions that still use links, actually. — TylerH, Apr 04 '19 at 16:45
@scuregen It doesn't matter what wording you use. You cannot have one interactive element inside another, to perform two actions with one click. Your `label` is interactive because it has a `for` attribute. The `a` is interactive because it has a `href` attribute. Remove either of these attributes and it becomes valid HTML (although it then also performs only one action when clicked). — Mr Lister, Apr 04 '19 at 17:02
@scuregen It is not very well documented because (since the HTML is invalid) what happens is the result of the browser's _error handling_ at work. The browser can only perform one of the actions, so it performs the jump to the fragment identifier in this case. And error handling is not thoroughly documented for all different errors (because there are so many possible errors!). As a result, different browsers handle errors differently. — Mr Lister, Apr 04 '19 at 17:05

colxi · Answer 1 · 2019-04-04T15:39:00.433

Is tricky but you can achieve it using pointer-events: none; in the anchors inside the label and cursor: pointer; in the labels, to preserve the pointer.

This will obviously prevent the default action of the anchor tag to be performed. If you need both actions to apply (select checkbox and follow link) you will need to use some javascript.

div {
  width: 100px;
  height: 50px;
  background: #121;
}


label{
    cursor: pointer;
}

label a{
    pointer-events: none;
}

<input type="checkbox" id="correct">

<label for="correct"><a href="#link1">work!</a></label>

<div></div>

<label for="correct">work!</label>

<label for="correct"><a href="#link2">work!</a></label>

I suspect the OP wants the link to work too, i.e. they want the checkbox to be toggled AND the href to be targeted at the same time, without using JavaScript. — Mr Lister, Apr 04 '19 at 15:37

score 0 · Answer 2 · answered Apr 04 '19 at 16:34

a tags are made for navigation only so adding an anchor tag inside a label will cause your page to navigate to another section or page. It will not check your input

I you want to navigate to your internal sections and check your inputs, you need to use JS.

$(function(){
var location
  $('a').click(function() {
    location = $(this).attr('href')
    $('[data-target="' + location + '"]').prop('checked',true)
  })
  $('input[type="checkbox"]').click(function () {
    location = $(this).attr('data-target')
    if($(this).prop("checked")) {
      $('html, body').animate({
        scrollTop: $(location).offset().top
      }, 0);
    }
  })
})

div {
  margin-top: 1000px;
  width: 100px;
  height: 50px;
  background: #121;
}

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<label for="correct">visited
<input type="checkbox" id="correct" data-target="#section1">
<label>

<a href='#section1'>working</a>

<div id='section1'></div>
</body>
</html>

Here you can find more information about anchor tags https://www.w3schools.com/tags/tag_a.asp

Check box does not work if there is an anchor element in the label element

2 Answers2