如何使用Bootstrap创建类似于切换按钮的单选按钮？

Bootstrap是目前最流行的前端框架之一，它提供了大量易于使用的UI组件和样式。本文将介绍如何使用Bootstrap创建类似于切换按钮的单选按钮。

准备工作

在开始之前，请确保你已经正确的引入了Bootstrap的CSS和JS文件。可以通过以下链接获取：

<!-- CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css">

<!-- JS 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.bundle.min.js"></script>

创建单选按钮

要创建一个类似于切换按钮的单选按钮，我们可以使用Bootstrap的"btn-group"类。"btn-group"类将一组按钮组合在一起，并允许用户在其中选择一个选项。

<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="btnradio1">选项1</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio2">选项2</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio3">选项3</label>
</div>

上面的代码将创建一个包含三个单选按钮的"btn-group"。为了使其看起来像“切换按钮”，我们将按钮包装在标签中。

需要注意的是，我们要将所有的单选按钮的name属性设为相同的值，这样它们就可以一起工作了。此外，还需要将其中一个按钮的checked属性设为"checked"，以便启用默认选项。

使用JavaScript获取选择的值

要获取用户选择的值，我们可以使用JavaScript来监听单选按钮的单击事件。当用户单击按钮时，我们可以获取其值并将其存储在变量中。

let radios = document.getElementsByName('btnradio');
let selectedValue;

for (let i = 0; i < radios.length; i++) {
  radios[i].addEventListener('click', function() {
    selectedValue = this.value;
  });
}

上面的代码将获取id为"btnradio"的单选按钮的值，并将其存储在selectedValue变量中。根据你的需要，你可以使用其他的方式获取和处理值。

结论

使用Bootstrap创建类似于切换按钮的单选按钮非常容易。我们只需要将几个单选按钮包装在"btn-group"类中，并在需要时使用JavaScript来获取所选的值。