リンクを選択し、その左側にあるチェックボックスを自動的にチェックします

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>