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

【问题标题】：how to prevent checkbox check when clicking on link inside label单击标签内的链接时如何防止复选框检查
【发布时间】：2009-07-08 13:59:48
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您可以通过 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>

【讨论】：

就我而言，我不得不替换 onclick 但 onmousedown

【解决方案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;
    }
});

【讨论】：

【解决方案3】：

为什么不把链接移到标签外？

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

【讨论】：

【解决方案4】：

只需添加 'for' 属性，它将防止不必要的冒泡

【讨论】：

【解决方案5】：

您可以在新窗口中打开链接，这样页面就不会改变。

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

【讨论】：

【解决方案6】：

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

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

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

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

【讨论】：

【解决方案7】：

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

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

您也可以将它们直接放入您的 onclick 中，但这比 imo 更好。

您也必须将事件传递给函数：

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

如果您决定在新窗口中打开它，您只需将 window.location 更改为 window.open

【讨论】：

【解决方案8】：

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

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

【讨论】：

【解决方案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 fiddle 示例

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

【讨论】：