Bootstrap按钮组：如何仅获取被点击按钮的文本内容

问题分析 #

你当前的代码中，$('.btn-group> .btn').text()会选中所有按钮元素并获取它们的合并文本，所以点击时会输出所有按钮的内容。要获取仅被点击按钮的文本，需要在事件回调中指向当前触发事件的元素。

修复代码 #

将回调里的选择器改为$(this)，它在jQuery事件回调中代表当前被点击的按钮：

$(".btn-group> .btn").on("click", function() {
  console.log($(this).text());
});

完整可运行代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="btn-group" data-toggle="buttons-radio">
  <button class="btn">1</button>
  <button class="btn">2</button>
  <button class="btn">3</button>
  <button class="btn">4</button>
</div>

可选：添加选中状态高亮 #

如果需要模拟单选按钮的选中视觉效果，可以增加类切换逻辑：

$(".btn-group> .btn").on("click", function() {
  $(".btn-group> .btn").removeClass("active");
  $(this).addClass("active");
  console.log($(this).text());
});

内容的提问来源于stack exchange，提问作者pyCthon