<label> 标签内的 <a> 标签未触发复选框答案

【问题标题】：<a> tag inside <label> tag not triggering checkbox<label> 标签内的 <a> 标签未触发复选框
【发布时间】：2017-06-21 15:06:15
【问题描述】：

我必须在<label> 标签内使用<a>。因为有很多css样式在我们目前的系统中只适用于<a>。 <a> 标签不链接到任何页面，但用于样式/悬停。

见下面的代码：

<input type="checkbox" id="my-id">
<label for="my-id"><a href="javascript:void(0)">Some text</a></label>

但是当点击“一些文本”时，它不会切换复选框状态。

我在<a> 标签上尝试了$.preventDefault()，但没有用。

我应该怎么做才能使<a> 表现得像一个标签？

【问题讨论】：

@DavidThomas HTML5 spec 允许<a> 在<label> 内。
在a 元素中有href 属性的任何原因？如果删除它，单击文本将切换复选框。
标签中允许使用<a> 标签，仅用于锚定或实际链接。如果您希望它看起来像一个链接，请将相同的样式应用于标签或标签内的<span>。不要为了外观而贬低链接。
@John：我的立场是正确的！（有点震惊，但绝对纠正了）谢谢！
@LGSon href 属性在 a 元素上不是必需的。以前版本的规范包含一个模棱两可的表述，但在当前草案中是 was made clear。

标签： javascript jquery html

【解决方案1】：

如果您从a 元素中删除href 属性，则单击文本将切换复选框。

<input type="checkbox" id="my-id">
<label for="my-id"><a>Some text</a></label>

作为 HTML 规范 states:

a 和 area 元素上的 href 属性不是必需的

【讨论】：

@BladeMight 其实这种情况下不需要超链接。
哦，原来如此...我在想目的是超链接，我错了吗？
@BladeMight 完全没有，但也可以用作占位符(1)，(2)。

【解决方案2】：

更新：这个答案是在编辑之前给出的，现在它已经失效了，不过，我会把它留给有用的人

给a锚pointer-events: none

label[for="my-id"] {
  cursor: pointer;
}
label[for="my-id"] a {
  pointer-events: none;
}

<input type="checkbox" id="my-id">
<label for="my-id"><a href="#">Some text</a></label>

如果需要支持旧版浏览器，请使用伪元素来覆盖它

label[for="my-id"] {
  cursor: pointer;
  position: relative;
}
label[for="my-id"]::after {
  content:  ' ';
  position: absolute;
  left: 0; top: 0;
  right: 0; bottom: 0;
}

<input type="checkbox" id="my-id">
<label for="my-id"><a href="#">Some text</a></label>

【讨论】：

这对浏览器的支持非常有限。
@Soviut 全球支持率约为 93.58%，您觉得有限吗？
在许多浏览器上，尤其是移动浏览器上，它才刚刚开始被支持。 Android 上的 Chrome 53 是第一个版本。任何旧版本仍会将其视为链接。此外，OP 想要链接的样式，而不是实际的 href。
@Soviut 我为所有这些添加了一个选项......如果在伪类上使用单冒号，则一直到 IE8......并且 OP 说：我必须使用在标记内。
@LGSon 非常感谢你。但它也杀死了在这种情况下我需要造型的悬停行为。我在原始问题中错过了，已经编辑过。

【解决方案3】：

只需将锚元素放在标签元素的外侧即可。

<input type="checkbox" id="my-id">
<a href="javascript:void(0)"><label for="my-id">Some text</label></a>

【讨论】：

【解决方案4】：

<input type="checkbox" id="my-id">
<label for="my-id"><a href="javascript:void(0)" target="my-id">Some text</a></label>
<script>
  document.querySelector("label[for=my-id] > a")
  .onclick = function(e) {
    var el = document.getElementById(
      this.parentElement.htmlFor
    );
    el.checked = !el.checked;
  }
</script>

【讨论】：

【解决方案5】：

你需要反转，在a中包含标签：

<input type="checkbox" id="my-id" >
<a href="javascript:void(0)"><label for="my-id">Some text</label></a>

JSFiddle

【讨论】：

主要问题是：when clicking on "Some text", it doesn't toggle the checkbox status. 我认为我的例子解决了这个问题，谁以及为什么被下注？

【解决方案6】：

不要将<a> 仅用于样式设置。改用标签上的类。

.my-link-style {
  /* To match the cursor style for an <a> */
  cursor: pointer;
  
  /* Add more styles here */
}

<input type="checkbox" id="my-id" />
<label for="my-id" class="my-link-style">Some text</label>

【讨论】：