Question

I’m trying to change the background positioning for a label based on whether or not an adjacent checkbox is checked.

I figured out how to select adjacent fields with jQuery and I verified that this selector is indeed working:

$("input[type='checkbox'] + label")

But I can’t figure out how to access the checkbox.

Here’s what I have so far…

$("input[type='checkbox'] + label").click(function() {
    $(this).css("background-position", $("--adjacent checkbox here--").attr('checked') ? "bottom" : "top");
});

Answer 1

$("input[type='checkbox'] + label").click(function() {
    var $th = $(this);
    $th.css("background-position", $th.prev().attr('checked') ? "bottom" : "top");
});

http://api.jquery.com/prev/

jQuery’s prev() method selects the immediate previous sibling if one exists.