使用纯 JavaScript 动态添加 Bootstrap Toggle 开关-js教程-PHP中文网

使用纯 JavaScript 动态添加 Bootstrap Toggle 开关

霞舞

发布： 2025-10-13 12:50:16

原创

750人浏览过

使用纯 JavaScript 动态添加 Bootstrap Toggle 开关

本文详细介绍了如何利用纯 javascript 动态创建并初始化 bootstrap toggle 开关。通过创建 html `input` 元素，设置必要的 `data` 属性，并结合 jquery 的 `bootstraptoggle()` 方法，可以实现页面上实时添加功能完善的 bootstrap 开关组件，确保其样式和交互行为正常工作。

前言与准备

在现代 Web 开发中，动态生成 UI 组件是常见需求。Bootstrap Toggle 是一个流行的插件，它将标准的 HTML 复选框转换为美观的开关按钮。本文将指导您如何使用纯 JavaScript 动态创建这些开关，并确保它们能够正常工作。

首先，请确保您的项目中已引入必要的 Bootstrap 和 Bootstrap Toggle 库。以下是推荐的 CDN 链接：

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<!-- Bootstrap Toggle CSS -->
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">

<!-- jQuery (Bootstrap Toggle 依赖 jQuery) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<!-- Bootstrap Toggle JS -->
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>

登录后复制

HTML 结构：宿主元素

为了动态添加开关，我们需要一个 HTML 容器元素作为它们的宿主。例如，可以在页面中定义一个空的 div：

<div id="switch-host">
  <!-- 动态添加的开关将在此处显示 -->
</div>

<button onclick="addSwitchToHost('switch-host')">添加新开关</button>

登录后复制

上述代码中，switch-host 是我们的宿主容器，一个按钮用于触发添加新开关的操作。

立即学习“Java免费学习笔记（深入）”；

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

查看详情

JavaScript 核心逻辑

动态添加 Bootstrap Toggle 开关的关键在于以下几个步骤：

创建 input 元素：Bootstrap Toggle 插件是基于 input type="checkbox" 工作的。
设置必要属性：为 input 元素设置 type="checkbox" 和 data-toggle="toggle"。
追加到 DOM：将新创建的 input 元素追加到预设的宿主元素中。
初始化 Toggle：这是最关键的一步。仅仅追加 HTML 元素并不会使其成为功能完善的 Bootstrap Toggle 开关。我们需要调用 $(element).bootstrapToggle() 方法来初始化它。

下面是一个实现此功能的 JavaScript 函数示例：

function addSwitchToHost(hostId) {
  const host = document.getElementById(hostId);

  // 1. 创建 input 元素
  const inputEl = document.createElement("input");

  // 2. 设置必要属性
  inputEl.setAttribute("type", "checkbox");
  inputEl.setAttribute("name", "dynamicSwitch_" + Date.now()); // 为每个开关设置唯一名称
  inputEl.dataset.toggle = "toggle"; // 等同于 inputEl.setAttribute("data-toggle", "toggle");

  // 可以根据需要设置其他属性，例如：
  // inputEl.setAttribute("checked", true); // 默认选中
  // inputEl.dataset.onstyle = "primary";    // 开启状态样式
  // inputEl.dataset.offstyle = "secondary";   // 关闭状态样式
  // inputEl.dataset.on = "激活";          // 开启状态文本
  // inputEl.dataset.off = "关闭";         // 关闭状态文本

  // 3. 追加到 DOM
  host.appendChild(inputEl);

  // 4. 初始化 Bootstrap Toggle
  // 注意：Bootstrap Toggle 依赖 jQuery，所以这里使用 $()
  $(inputEl).bootstrapToggle();
}

登录后复制

完整示例

将上述 HTML 和 JavaScript 代码结合起来，您将得到一个完整的、可运行的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态添加 Bootstrap Toggle 开关</title>

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
  <!-- Bootstrap Toggle CSS -->
  <link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
</head>
<body>

  <div class="container mt-5">
    <h1>动态 Bootstrap Toggle 开关示例</h1>
    <div id="switch-host" class="mb-3">
      <!-- 动态添加的开关将在此处显示 -->
    </div>
    <button class="btn btn-primary" onclick="addSwitchToHost('switch-host')">添加新开关</button>
  </div>

  <!-- jQuery (Bootstrap Toggle 依赖 jQuery) -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
  <!-- Bootstrap Toggle JS -->
  <script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>

  <script>
    function addSwitchToHost(hostId) {
      const host = document.getElementById(hostId);

      const inputEl = document.createElement("input");
      inputEl.setAttribute("type", "checkbox");
      inputEl.setAttribute("name", "dynamicSwitch_" + Date.now());
      inputEl.dataset.toggle = "toggle";
      inputEl.dataset.onstyle = "success"; // 设置开启样式为绿色
      inputEl.dataset.offstyle = "danger";  // 设置关闭样式为红色
      inputEl.dataset.on = "启用";
      inputEl.dataset.off = "禁用";

      host.appendChild(inputEl);

      // 初始化 Bootstrap Toggle
      $(inputEl).bootstrapToggle();
    }
  </script>
</body>
</html>

登录后复制

注意事项与总结

jQuery 依赖：Bootstrap Toggle 插件是基于 jQuery 构建的。因此，在动态添加和初始化开关之前，请务必确保页面已正确引入 jQuery 库。
初始化是关键：仅仅创建 input 元素并设置 data-toggle="toggle" 属性是不够的。Bootstrap Toggle 插件需要通过 JavaScript 代码（即 $(element).bootstrapToggle()）来扫描 DOM 并将其转换为可视化的开关组件。对于动态添加的元素，必须在它们被添加到 DOM 之后手动调用此初始化方法。
属性设置：可以通过 setAttribute() 方法或直接使用 dataset 属性来设置 data-* 属性，例如 inputEl.dataset.toggle = "toggle"。这些属性可以控制开关的默认状态、样式和文本。
唯一 ID/名称：如果需要对每个动态生成的开关进行独立操作或表单提交，建议为它们设置唯一的 id 或 name 属性。

通过遵循上述步骤和注意事项，您可以灵活地在任何 Web 应用程序中动态生成和管理 Bootstrap Toggle 开关，从而增强用户界面的交互性和动态性。

以上就是使用纯 JavaScript 动态添加 Bootstrap Toggle 开关的详细内容，更多请关注php中文网其它相关文章！