如果标签元素中有锚元素，则复选框不起作用[重复]答案

【问题标题】：Check box does not work if there is an anchor element in the label element [duplicate]如果标签元素中有锚元素，则复选框不起作用[重复]
【发布时间】：2019-04-05 00:34:10
【问题描述】：

我想将页内链接的 a 元素放在标签元素中，以便复选框会随着页面中的每次移动而切换。

所以我首先写了这段代码：

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

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

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

<div></div>

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

这是通过单击每个标签并切换复选框来完成的。

但是，当我在标签元素内创建带有链接的代码时，复选框停止工作。

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>

作为搜索的结果，我发现了一个类似的问题，但没有写出关于使用页内链接的解决方案。

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

在标签元素中使用页内链接时，我需要什么 CSS 来切换复选框？

【问题讨论】：

链接应该去某个地方...不执行操作。你为什么首先使用链接？
另一个问题是禁止在label 中有a，所以你所做的就是不正确的。这就是为什么没有答案。
@Paulie_D 您希望通过复选框更改显示的元素。我想在单击页面中的链接时更改显示。此外，页内链接链接到页面中的部分。
你不能两者兼得。要么链接实际上去某个地方，要么它执行一个动作。就目前而言，您的 HTML 无效，我建议您重新考虑您的方法。
@scuregen 不管你用什么措辞。您不能在另一个交互元素中包含一个交互元素，以便一键执行两个操作。您的 label 是交互式的，因为它具有 for 属性。 a 是交互式的，因为它具有 href 属性。删除这些属性中的任何一个，它就会成为有效的 HTML（尽管它在单击时也只执行一个操作）。

标签： css checkbox

【解决方案1】：

这很棘手，但您可以使用标签内的锚点中的pointer-events: none; 和标签中的cursor: pointer; 来实现它，以保留指针。

这显然会阻止执行锚标记的默认操作。如果您需要同时应用这两个操作（选择复选框并点击链接）您需要使用一些 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>

【讨论】：

我怀疑 OP 也希望链接工作，即他们希望在不使用 JavaScript 的情况下同时切换复选框和定位 href。

【解决方案2】：

a 标签仅用于导航，因此在标签内添加锚标签将导致您的页面导航到另一个部分或页面。它不会检查您的输入

如果你想导航到你的内部部分并检查你的输入，你需要使用 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>

在这里你可以找到更多关于锚标签https://www.w3schools.com/tags/tag_a.asp的信息

【讨论】：