Making a button group act like radiobuttons with Bootstrap

Question

Hopefully can someone help me with this one, I can't figure it out.

I have 3 buttons in Bootstrap with one default active, see http://jsfiddle.net/sbystxp2/ , number two has the active state.

So far so good, but now I want the active state changed when I click on one or three and when I do that, the active state of number two must also disappear.

Anyone any idea how to do that with 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');
}); 

Kind regards,

Arie

Answer 1

Actually you can do this with Bootstrap itself. Here's an example from the docs: https://getbootstrap.com/docs/3.4/javascript/#buttons-checkbox-radio

Answer 2

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

and then select clicked by

   $(".btn.active")