How to apply JavaScript to btn-group-justified bootstrap to select / deselect children button elements

Question

Well, I understand that JavaScript does not apply to the entire group, because each button is part of a different group, but the documentation says that this is the right way to use with the button tag. This will not be a problem, except that I need them to be justified.

So my question is: how should I use JavaScript on all three buttons in general? It should work as a simple group of switches.

Click one and the rest are not selected. Any advice would be great!

HTML:

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group">
    <button type="button" class="btn btn-default">Low Cost/Effeciency</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default active">Average</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default">High Cost/Effeciency</button>
  </div>
</div>

JavaScript:

$(function() {
  $('body').on('click', '.btn-group button', function (e) {
    $(this).addClass('active');
    $(this).siblings().removeClass('active');

    //other things I need to do
  })
});

Answer 1

-.

.

$(document).on('click', '.btn-group button', function (e) {
  $(this).addClass('active').parent().siblings().find('button').removeClass('active');
});

- data-toggle="buttons".

- JS. . , , .

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="btn-group btn-group-justified" data-toggle="buttons" role="group" aria-label="...">
    <label class="btn btn-default">
        <input type="radio" name="options" />Low Cost/Effeciency
    </label>
    <label class="btn btn-default">
        <input type="radio" name="options" />Average
    </label>
    <label class="btn btn-default">
        <input type="radio" name="options" />High Cost/Effeciency
    </label>
</div>

Hide result