JQuery toggleClass() checkbox unchecked

Question

Hi Please check below code -

HTML

<div class="manage-user-freind" style="line-height:18px; cursor:pointer;">
  <span style="color:blue;">
    <img src="'+pageUrl+'/img/user-16x16.png" height="14" style="float:left; padding-top:2px;" /><input class="chk" type="checkbox" value="10" />pieter
  </span>
</div>

<div class="manage-user-freind" style="line-height:18px; cursor:pointer;">
  <span style="color:blue;">
    <img src="'+pageUrl+'/img/user-16x16.png" height="14" style="float:left; padding-top:2px;" /><input class="chk" type="checkbox" value="12" />john
  </span>
</div>

JQuery

$('.manage-user-freind').click(function(){
     $(this).toggleClass('clicked',function(){
            $('.chk').prop('checked', true);
     });
});

CSS

.clicked {
  background-color: yellow;
}

I have used toggleClass() function. toggleClass is working fine but all the check-boxes clicked also not unchecked the current checkbox .

I need when I will click any div first show that div in yellow color along with current checkbox checked. Again clicking on that yellow color div will remove and also checkbox will unchecked.

Thanks.

Sorry for my English wording. :(

Tushar · Accepted Answer · 2015-05-20 07:36:54Z

5

Try this:

$('.manage-user-freind').on('click', function() {
    $(this).toggleClass('clicked').find('.chk').prop('checked', $(this).hasClass('clicked'));
});

Demo: https://jsfiddle.net/tusharj/d84z5vub/1/

edited May 20, 2015 at 7:36

answered May 20, 2015 at 7:31

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Justinas · Accepted Answer · 2015-05-20 07:31:15Z

4

$.toggleClass don't have callback function. It's not async function, so you can move $('.chk').prop('checked', true); to next statement along toggling class:

$(this).toggleClass('clicked');
$('.chk').prop('checked', true);

answered May 20, 2015 at 7:31

Justinas

43.9k5 gold badges72 silver badges108 bronze badges

2 Comments

Tushar Over a year ago

This doesn't toggle the state of the checkbox

Justinas Over a year ago

@Tushar yes, because OP is always setting checkbox as checked, not toggling it.

Zee · Accepted Answer · 2015-05-20 07:36:10Z

2

To check and uncheck, this code should work:

$('.manage-user-freind').click(function(){
     $(this).toggleClass('clicked');
     var checkbox = $(this).find('.chk');
     checkbox.prop('checked', !checkbox.prop("checked"));
});

Here is a Fiddle.

answered May 20, 2015 at 7:36

Zee

8,4805 gold badges39 silver badges59 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:06:00Z

0

According to this: jquery function on toggleClass complete?

you can use premise to wait until class will be changed

$(this).toggleClass('clicked').promise().done(function(){
    alert('a');
});

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered May 20, 2015 at 7:34

suvroc

3,0621 gold badge17 silver badges29 bronze badges

Collectives™ on Stack Overflow

JQuery toggleClass() checkbox unchecked

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related