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

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

Answer 3

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

Answer 4

是否必须是链接？您可以在标签内加下划线/突出显示跨度。

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

选择链接，自动选中左侧的复选框

4 个答案: