Bootstrap radio toggle buttons switch css

Question

I'm using Bootstrap version 3.37, and I have two toggle buttons that users can select from.

What I want to do is once the blue button is click, it should be the "active" with the dark color, and if the green button is click, then green should be the "active". How do I do that? Right now, no matter which toggle button I click, the green is always the "active" one. Do I have to write any javascript code to do that manually or is there a built in function that I can use in boostrap that I can use? Thanks.

    <div class="btn-group" data-toggle="buttons">
      <label class="btn btn-default active" >
        <input type="radio" name="green" id="green" value="green"> Green
      </label>
      <label class="btn btn-default" >
        <input type="radio"  name="blue" id="blue" value="blue"> Blue
      </label>
    </div>

Answer 1

In addition to what @Dave Cross mentioned, You can't just toggle active class without javascript. But you can achieve it by simple HTML and CSS by slightly re-structuring your HTML template like below

 .btn-default { color: #333; background-color: #fff; border-color: #ccc; padding: 6px 12px; border-style: solid; border-width: 1px; } input { display: none; } input:checked + label{ color: #fff; background-color: #dc3545; border-color: #dc3545; }

 <div class="btn-group" data-toggle="buttons"> <input type="radio" name="color" id="green" value="green" /> <label for="green" class="btn btn-default"> Green </label> <input type="radio" name="color" id="blue" value="blue" /> <label for="blue" class="btn btn-default"> Blue </label> </div>

With jQuery you can toggle active class like below by listening to change event.

 $('#color-switch').on('change', 'input', function() { const container = $(this).closest('.btn-group'); container.find('.active').removeClass('active'); container.find('input:checked').parent().addClass('active'); });

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="color-switch" class="btn-group" data-toggle="buttons"> <label class="btn btn-default active"> <input type="radio" name="color" id="green" value="green"/> Green </label> <label class="btn btn-default"> <input type="radio" name="color" id="blue" value="blue"/> Blue </label> </div>

Answer 2

This isn't a Bootstrap or jQuery question; it has nothing to do with Javascript or CSS; it's just HTML.

HTML uses the "name" attribute on radio buttons in order to define which radio buttons are in a set (so it knows which ones to turn off when you select another in the set).

So both of your radio buttons need to have the same name attribute. In the example below, I've given them the name "colour".

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default active" >
    <input type="radio" name="colour" id="green" value="green"> Green
  </label>
  <label class="btn btn-default" >
    <input type="radio"  name="colour" id="blue" value="blue"> Blue
  </label>
</div>