Toggling class in group of buttons

Question

I have the following markup for a group of buttons:

<div class="btn-group pull-right">
    <button type="button" class="btn btn-default" id="today">Today</button>
    <button type="button" class="btn btn-default" id="this_week">This Week</button>
    <button type="button" class="btn btn-default" id="this_month">This Month</button>
    <button type="button" class="btn btn-default" id="custom">Custom</button>
</div>

I'm trying to replace class btn-default with class btn-primary on the button using jQuery so that when clicked, the clicked button will have the following class="btn btn-primary", and any other button in the group with class btn-primary will toggle back to btn-default.

Is there a more elegant solution to what I have provided below? Do I have to write a function for every button? Also, I risk adding btn btn-default to a button which already has that class. Any help is greatly appreciated.

$("#today").click(function () {
    $(this).parent().find("btn btn-primary").removeClass("btn btn-primary");
    $(this).parent().addClass("btn btn-default");
    $(this).addClass("btn btn-primary");
});

Answer 1

Demo

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

.btn-default {
  color: red;
}
.btn-primary {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="btn-group pull-right">
  <button type="button" class="btn btn-default" id="today">Today</button>
  <button type="button" class="btn btn-default" id="this_week">This Week</button>
  <button type="button" class="btn btn-default" id="this_month">This Month</button>
  <button type="button" class="btn btn-default" id="custom">Custom</button>
</div>

1. $(this): is the button that is clicked
2. addClass('btn-primary'): Adds specified class to the clicked button
3. .siblings('.btn'): will get the siblings(nodes on same level) having btn class of this element
4. .removeClass('btn-primary').addClass('btn-default'): Update classes accordingly of siblings

Answer 2

Note that you dont have to replace the class btn-default with btn-primary, you can simply apply the btn-primary class and its styling will supercede that of btn-default, as such you dont have to perform additional operations.

$('.btn-group .btn').on('click', function() { // On the click event for each button
  $(this) // get the button being clicked
    .addClass('btn-primary') // add the `btn-primary` class
    .siblings('.btn-primary') // get all sibling buttons which may already be selected
    .removeClass('btn-primary'); // remove the selected class
});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group pull-right">
  <button type="button" class="btn btn-default" id="today">Today</button>
  <button type="button" class="btn btn-default" id="this_week">This Week</button>
  <button type="button" class="btn btn-default" id="this_month">This Month</button>
  <button type="button" class="btn btn-default" id="custom">Custom</button>
</div>