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.

Sidenote: the id attribute for your inputs are invalid. See [this thread](http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html) — bfavaretto, Jul 06 '11 at 22:18

Paul · Answer 1 · 2011-07-06T23:02:40.813

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

edited Jul 06 '11 at 23:02

answered Jul 06 '11 at 22:13

Paul

2,186
20
26

1

I suggest using `$(this).closest("div")` instead of `$(this).parents("div")`. – bfavaretto Jul 06 '11 at 22:17
It seems to run twice every time I click it, so it toggles back to nothing. – Jul 06 '11 at 22:20
@bfavaretto - agreed... typed too quickly! – Paul Jul 06 '11 at 22:34
Yah it seems every click I make to this, actually does 2 clicks, so it toggles it on, and off. – Jul 06 '11 at 22:34
Was the ID on the checbox. Thanks – Jul 06 '11 at 22:45
But now, it doesn't check the checkbox when the label is clicked :( – Jul 06 '11 at 22:47

Kenji Kina · Accepted Answer · 2011-07-06T23:00:29.843

1

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

edited Jul 06 '11 at 23:00

answered Jul 06 '11 at 22:15

Kenji Kina

2,402
3
22
39

Removing the ID from the checkbox makes the toggle work, but then the checkbox doesn't actually get chcecked when the label is clicked. Adding the ID makes the checkbox work, but the toggle does not. – Jul 06 '11 at 22:52
Used a valid ID, had no effect. Moving the checkbox outside of the seemed to have solved everything. – Jul 06 '11 at 22:57
@Yegor Ah, then it was probably invalid HTML. Nice going – Kenji Kina Jul 06 '11 at 22:59

clairesuzy · Answer 3 · 2011-07-06T22:40:51.687

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

@Paul; indeed, thanks I updated with the select more/toggle to cancel :D — clairesuzy, Jul 06 '11 at 22:19

score 0 · Answer 4 · answered Jul 06 '11 at 22:15

0

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

answered Jul 06 '11 at 22:15

bdowden

993
7
11

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

4 Answers4