CODEWITHSUNDEEP
jqueryclick
Stellaria
Stellaria

Reputation: 43

Change class on each click

When we click on the span referent-R it has the checked class. This works. However when we click another time on the same span I would like to remove the checked class. It should radio button/checkbox behavior.

$('.referent-R').click(function() {
  if ($(this).is(':checked')) {
    $(this).removeClass('checked');
    $(this).addClass('unchecked');
  } else {
    $(this).removeClass('unchecked');
    $(this).addClass('checked');
  }
});
.referent-R {
  font-family: Roboto, sans-serif;
  content: 'R';
  font-weight: bolder;
  font-size: 25px;
}

.referent-R.checked {
  color: rgb(76, 10, 89);
}

.referent-R.unchecked {
  color: rgb(200, 200, 200);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="referent-R" title="référent"></span>

Thanks a lot !!

Upvotes: 1

Views: 42

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337713

The :checked selector only applies to radio buttons and checkboxes.

You can make the behaviour you require work in this case by setting the checked or unchecked class on the element by default then simply toggling those classes on click. Try this:

$('.referent-R').click(function() {
  $(this).toggleClass('checked unchecked');
});
.referent-R {
  font-family: Roboto, sans-serif;
  content: 'R';
  font-weight: bolder;
  font-size: 25px;
}

.referent-R.checked {
  color: rgb(76, 10, 89);
}

.referent-R.unchecked {
  color: rgb(200, 200, 200);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="referent-R checked" title="référent">Foo</span>

Upvotes: 1

Related Questions