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

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
});

小提琴

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

---

如果name您指的是链接的描述，只需使用$(this).text()获取点击链接的文本。
小提琴

Answer 5

你必须这样做：

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