本文详细介绍了如何利用纯 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免费学习笔记（深入）”；
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 开关，从而增强用户界面的交互性和动态性。
