如何防止点击标签内链接时的复选框检查

我有一个标签内的链接。问题是，当用户在阅读条款后点击“后退”时，复选框未被选中，因为当他们点击链接时，他们也同时取消选中该框，因为链接位于标签内。如何防止点击标签内链接时的复选框检查

<input type="checkbox" id="terms" name="terms" checked="checked" /> 
<label for="terms">I agree to be bound by the <a href="/terms">Terms</a></label>

如何防止单击链接时检查复选框？试图在标签上点击event.preventDefault()，但这并不妨碍复选框被选中/取消选中。

我可以从标签内取出链接（这意味着更多的CSS样式）。但现在我很好奇上述是否可能。

来源

2009-07-08 montrealist

您可以通过路由一个onclick事件来取消点击事件。

“return false;”部分将阻止点击事件向上移动到标签。

<input type="checkbox" id="terms" name="terms" checked="checked" /> 
<label for="terms">I agree to be bound by the <a href="#" onclick="window.open('/terms','_blank');return false;">Terms</a></label>

来源

2009-07-08 14:11:33 Jason

就我而言，我不得不更换`onclick`，而是`onmousedown` – 2015-08-20 07:38:08

您可以在新窗口中打开链接，以便页面不会更改。

如果您不想这样做，您可以检查链接是否已被访问，然后自动选中该框。

来源

2009-07-08 14:09:53 scheibk

我有类似的情况，但实际上点击链接时会打开一个新窗口。这不检查/取消选中该框。我相信这是因为点击不会通过链接指向标签。

因此，延长这一点，如果你想在同一页中打开链接，你可以把它打开使用点击处理，防止链路上的点击冒泡，像这样：

$('label a').click(function(ev) { ev.preventDefault(); window.location.href = $(this).attr('href'); }

（这是未经测试，并不是最好的JS使用，但它应该可以解决您的问题）

来源

2009-07-08 14:12:11 philnash

我同意最好的方式（易用性和易用性）将在新窗口中打开条款，但如果您希望打开它可以使用这个小功能：

function stopLabel(e) { 
    e.preventDefault(); 
    window.location= '/terms'; 
}

你也可以把它们直接放到你的onclick中，但这有点更好。

你将不得不事件传递给函数太：

<label for="terms">I agree to be bound by the <a href="/terms" onclick="stopLabel(event);">Terms</a></label>

如果您决定在新窗口中打开它，你可以只改变了window.location对window.open

来源

2009-07-08 14:22:37 Tjkoopa

为什么不要移动标签外的链接？

<label for="terms">I agree to be bound by the</label> <a href="/terms">Terms</a>

来源

2009-07-08 17:54:02 NickFitz

链接应该是标签，而不是它的一部分之外，因为点击就会触发两项行动（打开的链接，并勾选复选框）。

用户期待，如果该链接看起来像他预计将要采取的链接目标，或文本是有关复选框，用户会希望它来检查的链接触发只有一个动作，复选框。

来源

2009-11-23 08:31:30

也是一种很好的做法，允许在新选项卡中打开与target="_blank"的链接。

/* 
    Fix links inside of labels. 
*/ 
$('label a[href]').click(function (e) { 

    e.preventDefault(); 

    if (this.getAttribute('target') === '_blank') { 
     window.open(this.href, '_blank'); 
    } 
    else { 
     window.location = this.href; 
    } 
});

来源

2012-10-02 09:43:23

只需添加“为” attibute，它会从unwanting冒泡

来源

2013-10-17 15:20:29 Thermech

防止如果你确定在新标签中打开链接（我认为这是更好，因为也许用户有已经充满了页面上的某些数据），那么这甚至可以不用JS

<input type="checkbox" id="agreed" /> 
<label for="agreed"> 
    I agree with <a href="/terms-of-use" target="_blank">Terms of use</a> and <a href="/privacy-policy" target="_blank">Privacy Policy</a> 
</label>

这里处理是JS提琴例如

http://jsfiddle.net/davo3/zkcv3L3d/

来源

2015-05-06 10:16:56 dav

如何防止点击标签内链接时的复选框检查

回答

相关问题