Question

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

<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样式）。但现在我很好奇以上是否可能。

Answer 1

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

“归来假”; part会阻止click事件向上移动到标签。

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

Answer 2

允许在新标签页中打开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;
    }
});

Answer 3

为什么不将标签移到标签外？

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

Answer 4

只需添加'for'属性即可防止不必要的冒泡

Answer 5

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

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

Answer 6

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

因此，要扩展此功能，如果您希望链接在同一页面中打开，您可以使用点击处理程序将其打开，并防止点击链接冒泡，如下所示：

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

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

Answer 7

我同意最好的方法（可用性和易用性）是在新窗口中打开这些条款，但是如果你想在同一个窗口中打开它，你可以使用这个小功能：

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

Answer 8

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

用户期望只触发一个动作，如果链接看起来像链接，他会期望被带到链接目标，或者，如果文本与复选框相关，则用户可以选中该复选框。

Answer 9

如果您可以在新标签页中打开链接（我认为它更好，因为用户可能已在页面上填充了一些数据），即使没有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/

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

9 个答案: