CODEWITHSUNDEEP
jquerytwitter-bootstrapradio-buttonbuttongroup
Arie
Arie

Reputation: 371

Making a button group act like radiobuttons with Bootstrap

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

Upvotes: 1

Views: 1883

Answers (2)

CAphie1973
CAphie1973

Reputation: 51

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

Upvotes: 5

void
void

Reputation: 36703

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

and then select clicked by

   $(".btn.active")

Upvotes: 1

Related Questions