如何防止點擊標籤內鏈接時的複選框檢查

我有一個標籤內的鏈接。問題是，當用戶在閱讀條款後點擊「後退」時，複選框未被選中，因爲當他們點擊鏈接時，他們也同時取消選中該框，因爲鏈接位於標籤內。如何防止點擊標籤內鏈接時的複選框檢查

<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

如何防止點擊標籤內鏈接時的複選框檢查

回答

相關問題