标签内的链接也触发复选框，如何防止？

我有这个标签：标签内的链接也触发复选框，如何防止？

<label><input type="checkbox"> I aggree to the <a href="terms">terms</a> and would like to continue</label>

但是：

标签内的链接打开基础5显示模式。

这工作正常，但点击链接启用复选框。

我怎么能防止这种情况发生？

THX，

来源

2014-07-15 kevinius

复选框不能嵌套元素。 –

@MilindAnantwar - 这与什么有关？ – Quentin

那么违反HTML规则是否正确？ –

Try this.. 
<label> 
     <input type="checkbox" /> I aggree to the <a href="terms">terms</a> and would like to continue 
</label>

来源

2014-07-15 10:29:03 Torrezzzz

标签不要必须在非XHTML文档类型中自行关闭，原始发布者的HTML是有效的。 –

链接点击事件的停止传播。这可以防止点击事件冒泡到标签。互动元素里面

https://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation

来源

2014-07-15 10:31:11

互动元素会导致这样的功能的问题：它是不确定的，当你点击一个label元素内的a元素，反之亦然会发生什么。为避免这种情况，请从label元素中取出a元素，例如，

<label><input type="checkbox">I agree</label> to the <a href="terms">terms</a> 
and would like to continue

或

<input type="checkbox" id="agree"><label for="agree">I agree</label> to the 
<a href="terms">terms</a> and would like to continue

来源

2014-07-15 12:52:10

你应该只需要一个事件绑定到调用event.stopPropagation()和event.preventDefault()

JQuery的在标签上的所有链接的链接：

$(document).on("tap click", 'label a', function(event, data){ 
    event.stopPropagation(); 
    event.preventDefault(); 
    window.open($(this).attr('href'), $(this).attr('target')); 
    return false; 
});

纯javascript（你需要在你想要的链接上设置一个id OW）

var termLink = document.getElementById('termLink'); 
var termClickHandler = function(event) { 
    event.stopPropagation();  
    event.preventDefault(); 
    window.open(termLink.href, termLink.target); 
    return false; 
}; 
termLink.addEventListener('click', termClickHandler); 
termLink.addEventListener('touchstart', termClickHandler);

这些期望的链接目标设置为_self或_blank在同一窗口或新窗口中分别打开。

来源

2015-08-07 02:37:39 elvey

由于多个标签可以指向相同的复选框，因此可以将文本修改为由两个标签（指向复选框）和中间的锚文本组成。

<input id="cb" type="checkbox"> 
 
<label for="cb">I agree to the</label> 
 
<a href="#">terms</a> 
 
<label for="cb">and would like to continue</label>

使用上述技术，点击链接不会影响复选框的状态，但所有剩余的文本一样。

来源

2016-11-17 13:56:32 Danield

另一种直列方式：

<label> 
    <input type="checkbox"> 
    I aggree to the 
    <span onclick="event.stopPropagation();"> 
      <a href="terms">terms</a> 
    </span> 
    and would like to continue 
</label>

来源

2017-06-07 13:14:22 GlennG

标签内的链接也触发复选框，如何防止？

回答

相关问题