html - 组合一个 <a> 标签和一个 <label>

Question

我无法在 HTML 上组合 a 和 an 标签。 我正在尝试让文本在您单击它时既单击一个复选框又将您带到页面上的某个地方我试图让它像这样:

<a href"#somewhere"><label for"somecheckbox">Some Text</label></a>

但只有标签有效，然后我就这样尝试了:

<label for"somecheckbox"><a href"#somewhere">Some Text</a></label>

但是只有链接有效，有什么方法可以同时使用这两个链接吗？

Answer 1

问题是你试图嵌套 interactive content .这是您无法通过 W3C 规范执行的操作。查看a tag ，例如它是允许的内容。

您将需要使用 javascript 来实现您想要做的事情。

这是一个简单的例子:

var links = document.querySelectorAll("[data-for]");

//Set Event Handler
for(var i = 0; i < links.length; i++) {
  links[i].addEventListener("click", function(event){
    //Get the target cb from the data attribute
    var cbTarget = this.dataset.for;
    //Check the cb
    document.getElementById(cbTarget).checked = true;
  });
}

.head {margin-bottom: 100vh;}

<div class="head">
<a href="#aTarget" data-for="aCheckBox">Click Me</a> <input type="checkbox" id="aCheckBox" />
</div>
<div id="aTarget">A Target</div>