Link auswählen, aktiviert das Kontrollkästchen auf der linken Seite automatisch

Question

Ich möchte einen Benutzer in der Lage sein, über einen Link zu bewegen, klicken Sie darauf, und es wird automatisch das Kontrollkästchen links davon, und wenn sie es auswählen , wird es das Kontrollkästchen deaktivieren.

Wie mache ich das?

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

Answer 1

Anstelle einer Verbindung (Anker), eine <label> verwenden, die dafür ausgelegt ist:

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

oder ohne id, um es gewickelt:

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

Bei beiden ist kein JavaScript erforderlich, nur ein integriertes Browserverhalten.

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

Muss es ein Link sein? Sie können einen Bereich innerhalb eines Etiketts nur unterstreichen/hervorheben.

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