在Bootstrap 3单选按钮组上切换两个类的问题

Question

I am trying to Toggle two classes .btn-primary and .btn-default ONLY on parent of the checked Radio on Bootsrap 3 radio Buttons at This Demo . But as you can see from the example it only works at first check radio and incase of checking another radio the previous button loses both classes

$(function () {
    $('input:radio[name="opts"]').change(function () {
        $(this).parent().toggleClass("btn-primary btn-default");
    });
});

can you please let me know why this is happening and how I can fix it? Thanks

Answer 1

This should do the trick -

$(function () {
    $('input:radio[name="opts"]').change(function () {
        $('.btn').removeClass('btn-default');
        $('.btn').addClass('btn-primary');        
        $(this).parent().removeClass('btn-primary');
        $(this).parent().addClass('btn-default');
    });
});

Here is your fiddle: http://jsfiddle.net/cMALS/1/