toggleClass and remove class from all other elements

Question

How can I toggleClass and remove class from all other elements? Consider a div that contains a tags: html:

<div class="size">
   <a href="">blahblah</a>
   <a href="">blahblah</a>
</div>

jQuery:

 $(".size a").click(function(){
 $(this).toggleClass('checked');
 if($(".size a").hasClass('checked')){
     $(this).removeClass('checked');
  }
 })

I want to add class "cheched" to element and remove the class "ckeched" from other elements that have class "checked" . My code remove all classes. How can I add specific class and remove other element's class with click? Thanks in advance

Answer 1

This will do it

 $(".size a").click(function(){
    $('.size a.checked').not(this).removeClass('checked');
    $(this).toggleClass('checked');
 })

---

Update

Alternatively you could do

 $(".size").on('click','a', function(){
    $(this).toggleClass('checked').siblings().removeClass('checked');
 })

Answer 2

Only You need to Use it. :)

<script>
    $(document).ready(function () {
        $('.demo_class').click(function () {
            $(this).toggleClass('active').siblings().removeClass('active');
        });
    });
</script>

Answer 3

So late but its my answer

$(".size").click(function(){ $('.size').removeClass('checked') //Clear all checked class on .size $(this).addClass('checked') //Add checked class to current clicked .size })

Its cleaner,powerfull and safe.

Answer 4

I'm assuming that you have a class 'size' that contains a number of elements of which only one should be able to have the class 'checked' at any one time.

$(".size a").click(function()
{
    if($this).hasClass('checked')
    {
        $(".size a").removeClass('checked');
        $(this).addClass('checked');
    }
    else
    {
        $(this).removeClass('checked');
    }
}