CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
user3722592
user3722592

Reputation: 3

Bootstrap Changing the active radiobutton CSS when clicked

I am using 3 radio buttons with Bootstrap3.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default">
    <input type="radio" name="options" id="option1" class="namesort" autocomplete="off" checked/>Name
  </label>
  <label class="btn btn-default">
    <input type="radio" name="options" id="option2" class="agesort" autocomplete="off" /> Age
  </label>
  <label class="btn btn-default">
    <input type="radio" name="options" id="option3" class="salarysort" autocomplete="off" />Salary
  </label>
</div>

The buttons need to use the btn-default css when unselected and the btn-primary active css when selected.

So if I clicked the Age button, it would look like this:

  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" class="agesort" autocomplete="off" /> Age

I tried using the Jquery .removeClass() and .addClass() but can't get it working.

Does anyone know how to do this?

Upvotes: 0

Views: 1707

Answers (2)

MattD
MattD

Reputation: 4420

You can get your result by doing this.

$('label').click(function() {
    $('label.btn-primary').removeClass('btn-primary').addClass('btn-default');
    $(this).removeClass('btn-default').addClass('btn-primary');
});

FIDDLE

Upvotes: 0

Marcelo
Marcelo

Reputation: 4425

With bootstrap, what is being clicked aren't the radio buttons but the labels. You should bind your functionality to the radio button's click events.

$('label').click( function() {
  $(this).addClass('btn-primary').removeClass('btn-default').siblings().removeClass('btn-primary').addClass('btn-default');
});

(It is also likely that, if you use the function in this solution, you should limit the selector in your code as opposed to applying to all labels)

Added a bootply: http://www.bootply.com/FQKkiIUGlY

Upvotes: 1

Related Questions