切换前的Bootstrap 5文本-复选框(没有额外的插件/插件)

切换前的Bootstrap 5文本-复选框是指在Bootstrap 5版本中，在没有使用额外插件或插件的情况下，实现文本和复选框之间的切换效果。

具体实现方法如下：

1. 首先，在HTML文件中引入Bootstrap 5的CSS和JavaScript文件，确保页面可以正常加载Bootstrap框架。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

1. 在HTML文件中创建一个包含文本和复选框的容器元素，例如一个<div>元素。

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="switch">
  <label class="form-check-label" for="switch">切换</label>
</div>

1. 使用Bootstrap的CSS类来设置文本和复选框的样式。在上述代码中，form-check类用于创建一个复选框容器，form-switch类用于创建一个切换样式的复选框，form-check-input类用于设置复选框的样式，form-check-label类用于设置文本的样式。
2. 使用JavaScript代码来实现文本和复选框之间的切换效果。可以通过监听复选框的状态改变事件，来动态修改文本的内容或样式。

document.getElementById("switch").addEventListener("change", function() {
  var label = document.querySelector(".form-check-label");
  if (this.checked) {
    label.textContent = "已开启";
    label.classList.add("text-success");
    label.classList.remove("text-danger");
  } else {
    label.textContent = "已关闭";
    label.classList.add("text-danger");
    label.classList.remove("text-success");
  }
});

在上述代码中，通过addEventListener方法监听复选框的change事件，当复选框状态改变时，根据复选框的选中状态来修改文本的内容和样式。如果复选框被选中，则将文本内容修改为"已开启"，并添加text-success类来设置文本颜色为绿色；如果复选框未被选中，则将文本内容修改为"已关闭"，并添加text-danger类来设置文本颜色为红色。

这样，当用户点击复选框时，文本内容和样式会根据复选框的状态进行切换。

推荐的腾讯云相关产品和产品介绍链接地址：

• 腾讯云服务器（CVM）：提供稳定可靠的云服务器实例，满足各种计算需求。产品介绍链接
• 腾讯云对象存储（COS）：提供安全可靠的云端存储服务，适用于存储、备份和归档等场景。产品介绍链接
• 腾讯云人工智能（AI）：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。产品介绍链接
• 腾讯云物联网（IoT）：提供全面的物联网解决方案，帮助连接和管理物联网设备。产品介绍链接
• 腾讯云区块链（BCS）：提供安全高效的区块链服务，支持快速搭建和管理区块链网络。产品介绍链接
• 腾讯云视频处理（VOD）：提供强大的视频处理能力，包括转码、截图、水印等功能。产品介绍链接