How to add and remove classes when click on labels using jQuery?

Question

I'm trying to make a filter, if a label is clicked on the filter i need to remove a class and add another, if i click the same button i want to remove the class andded and re-add the old class.

So far it works to change the color when clicked, but when i add the code for changing the label back to normal style, it changes back to normal style right after the first click.

The html sample code (also autogenerated using php)

<label class="btn btn-default">
    <input type="checkbox" class="tagfilter" style="border:1px solid #520a76;padding:6px; display:none;" data-id="1" value="tag1" /> tag1   
</label>
<label class="btn btn-default">
    <input type="checkbox" class="tagfilter" style="border:1px solid #520a76;padding:6px; display:none;" data-id="2" value="tag2" /> tag2
</label>
<label class="btn btn-default">
    <input type="checkbox" class="tagfilter" style="border:1px solid #520a76;padding:6px; display:none;" data-id="3" value="tag3" /> tag3
</label>

The jQuery code:

$('.tag-btn').click(function(){

    if($(this).hasClass('btn-default')){
        alert(1);
        $(this).removeClass('btn-default').addClass('btn-shop-color');
    }

    if($(this).hasClass('btn-shop-color')){
        alert(2);
        $(this).removeClass('btn-shop-color').addClass('btn-default');
    }
});

label is meant to wrap only one form action element, not three... — Roko C. Buljan
– Roko C. Buljan, Commented Oct 20, 2016 at 8:42
I know, and i pasted wrong code, all the inputs have a own label element. i will update the code — sdfgg45
– sdfgg45, Commented Oct 20, 2016 at 8:43

ZiNNED · Accepted Answer · 2016-10-20 08:44:13Z

2

Just use the toggleClass() function provided by jQuery:

$('.tag-btn').click(function(){
    $(this).toggleClass('btn-default btn-shop-color');
});

answered Oct 20, 2016 at 8:44

ZiNNED

2,64022 silver badges32 bronze badges

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

Comments

LittleQ · Accepted Answer · 2016-10-20 08:44:21Z

2

You need return in the first if, o.w. both if triggered

if($(this).hasClass('btn-default')){
    $(this).removeClass('btn-default').addClass('btn-shop-color');
    return;
}

answered Oct 20, 2016 at 8:44

LittleQ

1,9251 gold badge14 silver badges14 bronze badges

Comments

guradio · Accepted Answer · 2016-10-20 08:45:16Z

2

$('.btn').click(function() {

  $(this).toggleClass('btn-default btn-shop-color')
});

.btn-default {
  color: red
}
.btn-shop-color {
  color: blue
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="btn btn-default">qwe
</label>

Use .toggleClass()

answered Oct 20, 2016 at 8:45

guradio

15.6k4 gold badges39 silver badges64 bronze badges

Collectives™ on Stack Overflow

How to add and remove classes when click on labels using jQuery?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest