Question

<script type="text/javascript">
$(document).ready(function() {
      $('label').click(function() {
         var total = 0;

          $('.option:checked').each(function() {
              total += Number($(this).data('number'));   
              total = total.toFixed(2); 

          });

              $('#ship_total').text(total);

                var sub_total = <?php echo $this->cart->total(); ?>;

                var ship_total = ($("#ship_total").text());

                var final_total = parseFloat(sub_total) + parseFloat(ship_total);

                final_total = final_total.toFixed(2);

            $('#new_total').text(final_total);

        $('.option:not(:checked)').removeClass('shippingSet');
        $('.option:checked').addClass('shippingSet');
      });
    });
</script>

Simple enough.. I want to addClass to checked radio and removeClass from a not checked radio. Radio have a class named option

I’m able to addClass using $(this).addClass('shippingSet') but I don’t know how to remove it. Can someone tell me the proper way to add/remove class please? Thanks.

HTML

<label><input type="radio" name="ship" class="option" data-number="<?php echo $shipTotal['Ground']; ?>" value="S1"/> Ground <b>$<?php echo $shipTotal['Ground']; ?></b></label>

DEMO –>

http://jsfiddle.net/vdgAQ/1/

Answer 1

Is this what you are looking for?

http://jsfiddle.net/vdgAQ/2/

In your original fiddle, you added the class to the radio button itself which will not affect the styles of the labels, and the radio button itself has no text colour to change or bg colour to change so you won’t see any difference. I only added

$('.option').parent().removeClass('shippingSet');
$('.option:checked').parent().addClass('shippingSet');

this will add the class to the parent which is “label” and it will affect the txt and bg of the label which contains the visible text