单击标签内的链接时如何防止复选框检查 [英] how to prevent checkbox check when clicking on link inside label

问题描述

我在标签内有一个链接。问题是，当用户在阅读完术语后单击返回时，将取消选中该复选框，因为当他们点击链接时，他们也同时取消选中该框，因为该链接位于标签内。

I have a link inside a label. The problem is, when user clicks 'back' after having read the terms, the checkbox is unchecked, because when they clicked on the link they also unchecked the box at the same time, since the link is inside a label.

<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（），但这不会阻止选中/取消选中复选框。

How can I prevent the checkbox from being checked when link is clicked? Tried doing event.preventDefault() on label click, but that doesn't prevent checkbox from being checked/unchecked.

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

I could just take out the link from inside a label (which means more CSS styling). But now I'm curious whether the above is possible.

推荐答案

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

You can cancel the click event by routing it through an onclick event.

返回假;部分将阻止点击事件向上移动到标签。

The "return false;" part will prevent the click event from moving up to the label.

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

这篇关于单击标签内的链接时如何防止复选框检查的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！