Jquery Add Class To Radio Box Not Removed

I use jQuery to add a class to a radio box if it is selected. That works fine, but it does not removed the class when selecting another radio box. What am I missing? jQuery('.check

Solution 1:

Remove selected class from all .radio-inline and then add/remove selected as per condition as shown below.

<script>jQuery(".checkbox-radio").change(function() {
  $(".radio-inline").removeClass("selected"); //add thisif ($(this).is(':checked')){
    $(this).closest(".radio-inline").addClass("selected");
  }
  else
    $(this).closest(".radio-inline").removeClass("selected");
});
</script>

DEMO

Solution 2:

The name attribute should  be the same forall your check-boxes
See here:

JSFIDDLE

Solution 3:

jQuery(".checkbox-radio").on('click',function() {
if ($(this).is(':checked'))
$(this).closest(".radio-inline").addClass("selected");
else
$(this).closest(".radio-inline").removeClass("selected");
});

Solution 4:

Use like this

$(".radio-inline").click(function() {

    $(".radio-inline").find("input").removeClass("selected");

    if ($(this).find("input").is(':checked')){      
        $(this).find("input").addClass("selected");
    }

});