使用 Bootstrap 使按钮组像单选按钮一样

Posted 2023-03-05

【中文标题】使用 Bootstrap 使按钮组像单选按钮一样

【英文标题】：Making a button group act like radiobuttons with Bootstrap

【发布时间】：2015-04-21 23:17:12

【问题描述】：

希望有人能帮我解决这个问题，我想不通。

我在 Bootstrap 中有 3 个按钮，其中一个默认处于活动状态，请参阅 http://jsfiddle.net/sbystxp2/，第二个处于活动状态。

到目前为止一切顺利，但现在我希望在单击一或三个时更改活动状态，当我这样做时，第二个的活动状态也必须消失。

有人知道如何用 Jquery 做到这一点吗？

$('.checkit .btn').click(function () 
    $(this).parent().find('input').val($(this).data("value"));
);

$('#one').on('click', function () 
    alert('one is clicked');
);

$('#two').on('click', function () 
    alert('two is clicked');
);

$('#three').on('click', function () 
    alert('three is clicked');
); 

亲切的问候，

阿里

【参考方案1】：

实际上，您可以使用 Bootstrap 本身来做到这一点。这是文档中的一个示例：https://getbootstrap.com/docs/3.4/javascript/#buttons-checkbox-radio

【参考方案2】：

$('.btn').click(function()
    $('.btn').removeClass('active');
    $(this).addClass('active');
);

然后选择clicked by

   $(".btn.active")