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

前言与准备

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

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

HTML 结构：宿主元素

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

  


添加新开关

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

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

Cursor

一个新的IDE，使用AI来帮助您重构、理解、调试和编写代码。

下载

JavaScript 核心逻辑

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

1. 创建 input 元素：Bootstrap Toggle 插件是基于 input type="checkbox" 工作的。
2. 设置必要属性：为 input 元素设置 type="checkbox" 和 data-toggle="toggle"。
3. 追加到 DOM：将新创建的 input 元素追加到预设的宿主元素中。
4. 初始化 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 代码结合起来，您将得到一个完整的、可运行的示例：

  
  
  

  
  
  
  



  

    
动态 Bootstrap Toggle 开关示例
    

      
    
    添加新开关
  

  
  
  
  
  
  

  

注意事项与总结

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

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