bootstrap кнопки множественного выбора и ('щелкнуть')

Question

Я хочу использовать Bootstrap 4 кнопки для обозначения выбора пользователя на странице. Кнопки должны переключаться между выбранными / невыделенными, и мне нужно будет иметь возможность читать их состояние по мере их изменения. Я использую on ('щелчок'), чтобы собрать состояние кнопок. Похоже, что у меня проблема со временем. Когда кнопка нажата, он точно сообщает настройки всех кнопок, кроме нажатой. Отдельная настройка кнопки только для сообщения о состоянии кнопок всегда сообщает правильно. Как правильно получить состояния кнопок при нажатии одной из кнопок?

function showSelection() {
    jQuery("#selection_display").empty();
    jQuery("#selection_display").append("<hr>choice1  active:" + jQuery("#choice1").hasClass('active'));
    jQuery("#selection_display").append("<hr>choice2  active:" + jQuery("#choice2").hasClass('active'));
    jQuery("#selection_display").append("<hr>choice3  active:" + jQuery("#choice3").hasClass('active'));
}

jQuery(document).ready(function () {
  jQuery(".option_group1").on("click", function () {
     showSelection();
  });
});
<button id="choice1" data-toggle="button" class="btn btn-secondary  option_group1">choice1</button>
<button id="choice2" data-toggle="button" class="btn btn-secondary  option_group1">choice2</button>
<button id="choice3" data-toggle="button" class="btn btn-secondary  option_group1">choice3</button>
<button onclick="showSelection();">Update Selection</button>
<div id="selection_display">
</div>

https://jsfiddle.net/johnnyruin/peo81svu/35/

Answer 1

Это связано с тем, что событие bootstrap click было выполнено после вашего события click, классы этих кнопок еще не были обновлены.

Вы можете обновить классы самостоятельно, чтобы чтобы он правильно отображался в ваших индикаторах, и поверните его обратно, чтобы bootstrap справился с этим:

jQuery(document).ready(function () {
  jQuery(".option_group1").on("click", function () {
     // update the class manually, to get it shown correctly
     jQuery(this).toggleClass('active')
     showSelection();
     // turn it back to let bootstrap handle it
     jQuery(this).toggleClass('active')
  });

});

См. эту скрипку: https://jsfiddle.net/erqm4avj/

Здесь я добавляю другое решение, используя API Bootstrap:

jQuery(document).ready(function () {
  jQuery(".option_group1").on("click", function (e) {
     // Stop bootstrap's event
     e.stopPropagation(); 
     // Change the state manully
     jQuery(this).button('toggle');
     
     // do whatever we want with the right states
     showSelection();
  });
});

См. Эту скрипку: https://jsfiddle.net/Ln9yrjpx/