如何判断Bootstrap单选按钮的激活状态并实现回车触发调试弹窗？

嘿，我来帮你搞定这个Bootstrap单选按钮的状态判断和调试弹窗功能！

首先，先确认你的Bootstrap单选按钮组的HTML结构大概是这样的（如果不是可以调整选择器）：

<div class="btn-group" role="group" aria-label="选择区域">
  <button type="button" class="btn btn-secondary active" id="option1">欧盟区</button>
  <button type="button" class="btn btn-secondary" id="option2">美洲区</button>
  <button type="button" class="btn btn-secondary" id="option3">亚太区</button>
</div>
<input type="text" id="searchplayer1" placeholder="输入后按回车测试">

然后看你现有的JS代码，我帮你优化并补全完整的调试逻辑：

$(document).ready(function() {
  $('#searchplayer1').keypress(function(e) {
    // 兼容不同浏览器的按键码获取
    var keycode = e.keyCode || e.which;
    // 判断是否按下回车键
    if(keycode === 13) {
      // 直接选中btn-group里带有active类的按钮
      var activeBtn = $('.btn-group .btn.active');
      
      if(activeBtn.length) {
        // 这里可以获取按钮的文本，或者更推荐用data属性存业务需要的字符串
        // 比如给按钮加data-value="eu"，就用activeBtn.data('value')获取
        var selectedContent = activeBtn.text().trim();
        alert('当前激活的选项是：' + selectedContent);
        
        // 后续项目里就可以用这个selectedContent（或者data-value的值）做逻辑处理啦
      } else {
        alert('还没有选中任何选项哦！');
      }
    }
  });
});

几个关键优化点给你说下：

• 不用重复写document.getElementById，直接用jQuery选择器$('#option1')就可以判断单个按钮的激活状态，不过更通用的是直接找所有激活的按钮，这样不管有多少个选项都能适配
• 用e.keyCode || e.which兼容老浏览器的按键码获取，而且用===做判断更严谨
• 推荐给按钮加data-value属性来存你后续需要的业务字符串（比如<button data-value="eu_string" ...>），这样就算按钮文本变了，业务逻辑也不会受影响，获取的时候用activeBtn.data('value')就行
• 检查activeBtn.length可以避免没有选中选项时出现的报错

如果你只是想单独判断option1是否激活，那代码可以简化成：

if($('#option1').hasClass('active')) {
  alert('Option1处于激活状态');
}

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