如何在JavaScript中结合Bootstrap单选框实现条件判断逻辑？

没问题！我来帮你搞定这个需求——Bootstrap的按钮式单选框（就是你用btn-group-toggle做的这种）本质还是原生的radio输入框，所以用JavaScript判断选中状态很容易，我给你两种常用的实现方式：

先补全你的HTML结构 #

首先把你没写完的代码补全成完整的Bootstrap按钮单选组：

<div class="alert alert-info" role="alert">
  <label>Selection</label>
  <div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary active">
      <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
    </label>
    <label class="btn btn-secondary">
      <input type="radio" name="options" id="option2" autocomplete="off"> Inactive
    </label>
    <label class="btn btn-secondary">
      <input type="radio" name="options" id="option3" autocomplete="off"> Pending
    </label>
  </div>
</div>

方法1：实时监听选中变化（推荐） #

如果想在用户切换单选框时立刻执行对应操作，可以给每个radio绑定change事件，或者直接监听整个name组：

// 获取所有name为options的单选框
const radioOptions = document.querySelectorAll('input[name="options"]');

// 给每个单选框绑定change事件
radioOptions.forEach(radio => {
  radio.addEventListener('change', function() {
    // 判断当前选中的是哪个单选框
    if (this.id === 'option1') {
      // 选中option1时执行的操作
      console.log('你选中了Active选项！');
      alert('Active选项已选中，执行对应逻辑~');
    } else if (this.id === 'option2') {
      console.log('你选中了Inactive选项！');
      // 这里写option2的操作
    } else if (this.id === 'option3') {
      console.log('你选中了Pending选项！');
      // 这里写option3的操作
    }
  });
});

方法2：主动检查选中状态（比如点击按钮时） #

如果不需要实时触发，而是在某个动作（比如点击提交按钮）时再判断，可以主动获取选中的radio：

<!-- 先加一个触发检查的按钮 -->
<button id="checkBtn" class="btn btn-primary mt-3">检查选中状态</button>

document.getElementById('checkBtn').addEventListener('click', function() {
  // 获取当前选中的单选框
  const selectedOption = document.querySelector('input[name="options"]:checked');
  
  if (selectedOption) {
    if (selectedOption.id === 'option1') {
      console.log('当前选中的是Active');
      // 执行option1的操作
    } else {
      console.log(`当前选中的是${selectedOption.id}`);
      // 其他选项的逻辑
    }
  } else {
    console.log('没有选中任何选项');
  }
});

小提醒 #

• 确保你已经引入了Bootstrap的CSS和JS：Bootstrap 5不需要依赖jQuery，Bootstrap 4及以下版本需要先引入jQuery，不然按钮的切换样式不会正常生效。
• 单选框的name属性必须保持一致，这样才能保证同一时间只能选中一个选项。

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