Question

我有像

这样的代码

<input type="checkbox" name="abc" value="A" class="chbx">
<a href="#" class="checkbox-selector">href1</a>
<input type="checkbox" name="abc" value="b" class="chbx">
<a href="#" class="checkbox-selector">href2</a>
<input type="checkbox" name="abc" value="c" class="chbx">
<a href="#" class="checkbox-selector">href3</a>

当我点击href1复选框时，我希望选择第一个，当我点击href2时，应该选择第二个复选框。

如何在jQuery中完成？

Answer 1

你可以用不同的方式解决这个问题，而不是使用javascript

试试这个：

<label><input type="checkbox" value="hello" name="chkbox1" /> Here is the text</label>

<label><input type="checkbox" value="hello" name="chkbox2" /> Here is the text</label>

<label><input type="checkbox" value="hello" name="chkbox3" /> Here is the text</label>

Answer 2

你不需要jQuery。你可以使用普通的旧HTML ......

<input type="checkbox" name="abc" id="chk1" value="A" class="chbx">
<label for="chk1" class="checkbox-selector">href1</label>
<input type="checkbox" name="abc" id="chk2" value="b" class="chbx">
<label for="chk2" class="checkbox-selector">href2</label>
<input type="checkbox" name="abc" id="chk3" value="c" class="chbx">
<label for="chk3" class="checkbox-selector">href3</label>

要添加对旧浏览器的支持（例如Fabricio建议的ie6），请使用scessor建议的jQuery方法：

$('.checkbox-selector').click(function() {
    $(this).prev().prop('checked', true);
});

请注意，如果您使用的浏览器不支持标签，则应实现这两种方法并仅启用javscript方法。

Answer 3

如果您使用标签，只要您给复选框一个ID并在标签中设置FOR属性，它就会自动选中您的复选框。

<input type="checkbox" name="abc" value="A" class="chbx" id="c1">
<label for="c1" class="checkbox-selector">href1</label>
<input type="checkbox" name="abc" value="b" class="chbx" id="c2">
<label for="c2" class="checkbox-selector">href2</label>
<input type="checkbox" name="abc" value="c" class="chbx" id="c3">
<label for="c3" class="checkbox-selector">href3</label>

您应用于前一个超链接的任何样式仍应适用于该标签。

Answer 4

完整的工作示例，用于检查和取消选中点击框：

$('.checkbox-selector').click(function() {
    var chb = $(this).prev(); //caches selector
    chb.prop('checked', !chb.prop('checked')); //inverses checked state
});

Fiddle

但老实说，除非你真的需要兼容旧版浏览器，如ie6和其他非html5浏览器，否则你应该使用<label>方法。

<小时/> 如果name表示链接的说明，请使用$(this).text()获取点击链接的文字。
Fiddle

Answer 5

你必须这样做：

$('.checkbox-selector').click(function(){
    $(this).prev().attr('checked', true);
});

jquery在要检查的标记之前检查上一个复选框

5 个答案: