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

我正在尝试切换两个类

.btn primary

和

.btn default

，仅在选中的启动单选按钮的父级上切换。但正如您从示例中看到的，它只在第一次检查收音机时起作用，如果检查另一个收音机，“上一个”按钮将丢失这两个类

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

---

你能告诉我为什么会发生这种情况以及我如何解决它吗？谢谢

这应该可以做到-

$(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');
    });
});

这是你的小提琴：