How do you toggle a class in jquery when label element is clicked?

Question

I have the following code. When the checkbox is checked (which is hidden), when the label is pressed around the avatar, I want to add a class "selected" to the outer div (pop-friends-item).

<div class="pop-friends-item">
    <label for="user_1" class="check_friend_item">
    <input name="invited[]" type="checkbox" value="1" id="user_1" style="display:none;">
    <img src="/avatar.jpg"> User 1</label>
</div>
<div class="pop-friends-item">
    <label for="user_2" class="check_friend_item">
    <input name="invited[]" type="checkbox" value="2" id="user_2" style="display:none;">
    <img src="/avatar.jpg"> user 2</label>
</div>

I only got it to add the class to all the items, not just the one thats clicked.

Answer 1

This just sets the selected class.

$("label").click(function() {
    $(this).closest("div").addClass("selected");
};

If you want to toggle back and forth:

$("label").click(function() {
    $(this).closest("div").toggleClass("selected");
};

UPDATE

Here's an update to handle the checkbox toggle (set to display) http://jsfiddle.net/qqUHW/1/

$("label").click(function () {
    var $this = $(this);
    $this.closest("div").toggleClass("selected");
    var $checkbox = $("input[type='checkbox']", $this);
    if ($checkbox.prop("checked")) {
        $checkbox.prop("checked", false);
    } else {
        $checkbox.prop("checked", true);
    }
});

Answer 2

How about this:

$("label.check_friend_item").click(function() {
    $(this).closest("div.pop-friends-item").toggleClass("selected");
    var $checkbox = $(this).find('input[type=checkbox]');
    if ($checkbox.is(':checked')) {
        $checkbox.attr('checked', false);
    } else {
        $checkbox.attr('checked', true);
    }
};

The whole checkbox shebang is probably not necessary if you can use valid HTML, though.

Link to JsFiddle sample

Answer 3

this should do it without the checkbox, if the pop-friends-item is always the direct parent of the label

$("label").click(function(){

   $(".selected").removeClass("selected");
   $(this).parent().addClass("selected");

});

if more than one needs selected then this should also work

   $(this).parent().toggleClass("selected");

---

As an alternative, to actually do it using the checkboxes, a change() function could be used, and you would need to hide the checkboxes in a more accessible way:

jQuery:

$('.pop-friends-item input').change(function() {
   if ($(this).is(':checked')) {
      $(this).closest('div').addClass("selected");
   } else {
      $(this).closest('div').removeClass("selected");
   }
});

CSS to hide the input instead of display: none; :

.pop-friends-item input {
   position: absolute;
   clip: rect(1px, 1px, 1px, 1px);
   clip: rect(1px 1px 1px 1px);
}

Answer 4

To make sure you're just adding the class to the correct div, limit your selector a bit more by adding the class of the div.

$("label.check_friend_item").click(function() {
      $(this).parents("div.pop-friends-item").toggleClass("selected");
});