選擇鏈接，自動選中它的左邊的複選框

Question

我希望用戶能夠將鼠標懸停在鏈接上，單擊它，它會自動選中它左側的複選框，並且當它們選擇它時，它將取消選中該框。

我該怎麼做？

<input type="checkbox" name="favorite_color" value="Orange"> <a href="#" rel="favorite_color">Orange</a>

Answer 1

取而代之的鏈接（錨），使用<label>這是專爲這一點：

<input type="checkbox" name="favorite_color" id="favorite_color" value="Orange"> 
<label for="favorite_color">Orange</label> 

或不id，纏着：

<label><input type="checkbox" name="favorite_color" value="Orange"> Orange</label> 

這兩個都沒有JavaScript要求，只是內置的瀏覽器行爲。

Answer 2

<input type="checkbox" id="chk" name="favorite_color" value="Orange"> 
<a href="#" rel="favorite_color" onclick="document.getElementById('chk').checked = true;"> Orange</a> 

Answer 3

$('a').click(function() { 
    var checkbox = $(this).prev('input[type="checkbox"]') 
    checkbox.attr('checked', checkbox.is(':checked')); 
} 

Answer 4

它是否必須是鏈接？您可以在標籤內加下劃線/突出顯示一個跨度。

<label> 
    <input type="checkbox" name="favorite_color" value="Orange"> 
    <span class="make_it_look_like_a_link">Orange</span> 
</label>