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

Question

我必须在标签内使用标签。因为我们当前系统中有许多只适用于标签的CSS样式。 标签并不链接到任何页面，仅用于样式/悬停效果。

请查看以下代码：

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

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

我尝试在<a>标签上使用$.preventDefault（），但不起作用。

我应该怎么做才能使<a>像标签一样工作？

- Ryan Hu

---

@DavidThomas HTML5规范允许在<label>标签内使用<a>标签。 - John Bupit

你的a元素中有href属性的原因是什么？如果将其删除，点击文本将切换复选框。 - GOTO 0

在锚定或实际链接的情况下，标签中允许使用<a>标签。如果您希望它看起来像一个链接，请将相同的样式应用于标签或标签内的<span>。不要为了外观而篡改链接。 - Soviut

@John：我承认错误！（有点震惊，但肯定是正确的）谢谢！ - David Thomas

@LGSon a元素上的href属性不是必需的。规范的先前版本包含了一种模棱两可的表述，但在当前的草案中已经澄清。 - GOTO 0

Answer 1

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

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

根据HTML规范所述：

a和area元素上的href属性是可选的。

- GOTO 0

---

@BladeMight 实际上，在这种情况下并不需要超链接。 - GOTO 0

哦，原来是这样...我一直以为<a>的作用是超链接，我错了吗？ - BladeMight

@BladeMight 一点也不，但它也可以被用作占位符 (1), (2)。 - GOTO 0

Answer 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>

- Asons

---

这在浏览器上的支持非常有限。 - Soviut

@Soviut 全球支持率约为93.58％，您认为这有限吗？ - Asons

在许多浏览器上，特别是移动浏览器上，它的支持才刚刚开始。Android 上的 Chrome 53 是第一个支持它的版本。任何旧版本仍将其视为链接。此外，OP 希望具有链接的样式，而不是实际的 href。 - Soviut

@Soviut，我为所有这些人添加了一个选项......如果在伪类上使用单冒号，则可以将其降级到IE8以下版本。OP说：我必须在<label>标记内使用<a>。 - Asons

@LGSon 非常感谢。但是它也会破坏我在这种情况下需要的悬停行为来进行样式设置。我在原始问题中错过了这一点，已经进行了编辑。 - Ryan Hu

Answer 3

不要仅使用<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>

- John Bupit

Answer 4

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

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

- user4639281

Answer 5

<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>

- guest271314

Answer 6

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

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

JSFiddle

- BladeMight

---

主要问题是：“单击“某些文本”时，它不会切换复选框状态。”我认为我的示例解决了这个问题，谁以及为什么给了负评？ - BladeMight