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

score 5 · Answer 1 · edited Feb 20 '20 at 02:36

5

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

edited Feb 20 '20 at 02:36

Dave Powers

2,051
2
30
34

answered Feb 20 '15 at 10:09

CAphie1973

51
1

score 1 · Accepted Answer · answered Feb 20 '15 at 10:09

1

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

and then select clicked by

   $(".btn.active")

answered Feb 20 '15 at 10:09

void

36,090
8
62
107

Making a button group act like radiobuttons with Bootstrap

2 Answers2