 <p>The button elements are not sibling elements.</p> <p>You need to select the parent element's sibling elements.</p> <p><a href="http://jsfiddle.net/eakbvwxL/" rel="nofollow"><strong>Working Example Here</strong></a></p> <pre><code>$(document).on('click', '.btn-group button', function (e) { $(this).addClass('active').parent().siblings().find('button').removeClass('active'); }); </code></pre> <p>However, the proper way to do this is to use the attribute <code>data-toggle="buttons"</code>.</p> <p>In doing so, you don't need to write any custom JS. For more information, see <a href="http://stackoverflow.com/questions/22362750/bootstrap-button-group-pre-select-button-with-html-only">this old answer</a> of mine explaining how it works.</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt; &lt;link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/&gt; &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"&gt;&lt;/script&gt; &lt;div class="btn-group btn-group-justified" data-toggle="buttons" role="group" aria-label="..."&gt; &lt;label class="btn btn-default"&gt; &lt;input type="radio" name="options" /&gt;Low Cost/Effeciency &lt;/label&gt; &lt;label class="btn btn-default"&gt; &lt;input type="radio" name="options" /&gt;Average &lt;/label&gt; &lt;label class="btn btn-default"&gt; &lt;input type="radio" name="options" /&gt;High Cost/Effeciency &lt;/label&gt; &lt;/div&gt;</code></pre> </div> </div> </p>