jQuery检查要检查的标签之前的上一个复选框

Question

I have a code like

<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>

What I desired is when I click on href1 checkbox 1st should be selected and when I click on href2 , the 2nd checkbox should be selected.

How can this be done in jQuery ?

Answer 1

You could go about this in a different way and not use javascript at all

Try this:

<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

You don't need jQuery. You can use plain old 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>

To add support to older browsers (eg ie6 suggested by Fabricio) use the jQuery approach suggested by scessor:

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

Note that you should implement both and only enable the javscript approach if you're using a browser that doesn't support labels.

Answer 3

If you use a label, it will automatically check the checkbox for you as long as you give the checkbox an ID and set the FOR attribute in the label.

<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>

Any styles you applied to the former hyperlink should still apply to the label.

Answer 4

Fully working example which checks and unchecks the boxes on click:

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

Fiddle

But honestly, unless you really need compatibility with older browsers such as ie6 and other non-html5 browsers, you should use the <label> s method.

---

If by name you meant the link's description, just use $(this).text() to get the clicked link's text.
Fiddle

Answer 5

You have to do this:

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