本教程详细介绍了如何利用纯javascript动态创建并初始化bootstrap toggle开关。文章将从引入必要库开始，逐步指导读者通过javascript创建`input`元素，设置其属性，将其添加到dom中，并最终使用jquery的`.bootstraptoggle()`方法将其转换为功能完备的开关，同时提供代码示例和注意事项，确保动态生成的开关能正常工作。
动态创建Bootstrap Toggle开关：纯JavaScript实现指南
在现代Web应用开发中，经常需要根据用户交互或后端数据动态生成UI组件。Bootstrap Toggle是一款流行的插件，能将标准的HTML复选框（checkbox）转换为美观且功能丰富的开关按钮。本教程将深入探讨如何仅使用纯JavaScript（结合jQuery进行插件初始化）来动态创建和激活这些Bootstrap Toggle开关。
1. 准备工作：引入必要的库
要使用Bootstrap Toggle，您需要引入Bootstrap CSS、Bootstrap Toggle CSS、jQuery以及Bootstrap JS和Bootstrap Toggle JS。确保这些库的引入顺序正确，通常jQuery应在Bootstrap JS之前，而Bootstrap Toggle JS应在Bootstrap JS之后。
动态添加Bootstrap Toggle开关
动态添加Bootstrap Toggle开关示例
点击下方按钮添加开关：
2. 理解Bootstrap Toggle的工作原理
Bootstrap Toggle通过将一个普通的元素转换为一个带有自定义样式和交互的开关。对于静态HTML，只需在input元素上添加data-toggle="toggle"属性即可。然而，当通过JavaScript动态创建元素时，仅添加此属性是不够的；我们还需要在元素被添加到DOM后，手动调用jQuery的.bootstrapToggle()方法来初始化它。
立即学习“Java免费学习笔记（深入）”；
3. 核心实现：动态创建与初始化开关
以下是实现动态添加Bootstrap Toggle开关的JavaScript函数。我们将创建两个函数：一个用于添加基本开关，另一个用于添加带自定义样式的开关。
3.1 创建基本开关的函数
这个函数将创建一个标准的复选框，并将其转换为Bootstrap Toggle开关。
let switchCounter = 0; // 用于为每个动态创建的开关生成唯一ID
/**
* 动态添加一个基本的 Bootstrap Toggle 开关到指定的宿主元素。
* @param {string} hostElId - 宿主元素的ID，开关将被添加到此元素内。
*/
function addBasicSwitch(hostElId) {
const host = document.getElementById(hostElId);
if (!host) {
console.error(`宿主元素ID为 "${hostElId}" 未找到。`);
return;
}
const uniqueId = `dynamicSwitch${++switchCounter}`;
// 1. 创建 input 元素
const inputEl = document.createElement("input");
inputEl.setAttribute("type", "checkbox");
inputEl.setAttribute("id", uniqueId); // 为开关设置唯一ID
inputEl.setAttribute("checked", false); // 默认不选中
// inputEl.dataset.toggle = "toggle"; // 对于动态添加，通常通过JS初始化，此属性可省略但无害
// 2. 将 input 元素添加到 DOM
// 为了更好的布局，我们可以在外面包一个div
const switchWrapper = document.createElement("div");
switchWrapper.className = "form-group"; // 添加一些间距
const labelEl = document.createElement("label");
labelEl.setAttribute("for", uniqueId);
labelEl.textContent = `开关 ${switchCounter}: `;
switchWrapper.appendChild(labelEl);
switchWrapper.appendChild(inputEl);
host.appendChild(switchWrapper);
// 3. 使用 jQuery 初始化 Bootstrap Toggle
// 这一步是关键！它将普通的checkbox转换为Bootstrap Toggle样式。
$(`#${uniqueId}`).bootstrapToggle();
console.log(`已添加并初始化基本开关: ${uniqueId}`);
}3.2 创建带自定义样式开关的函数
除了基本功能，Bootstrap Toggle还支持通过data-*属性进行丰富的自定义，例如开关的颜色、文本、大小等。这个函数将演示如何动态设置这些属性。
/**
* 动态添加一个带自定义样式的 Bootstrap Toggle 开关。
* @param {string} hostElId - 宿主元素的ID。
* @param {string} onStyle - 开启时的样式（如 'success', 'primary'）。
* @param {string} offStyle - 关闭时的样式（如 'danger', 'secondary'）。
* @param {string} onText - 开启时显示的文本。
* @param {string} offText - 关闭时显示的文本。
* @param {boolean} initialState - 开关的初始状态（true为选中，false为未选中）。
*/
function addCustomSwitch(hostElId, onStyle, offStyle, onText, offText, initialState) {
const host = document.getElementById(hostElId);
if (!host) {
console.error(`宿主元素ID为 "${hostElId}" 未找到。`);
return;
}
const uniqueId = `dynamicSwitch${++switchCounter}`;
const inputEl = document.createElement("input");
inputEl.setAttribute("type", "checkbox");
inputEl.setAttribute("id", uniqueId);
inputEl.setAttribute("checked", initialState ? "checked" : false); // 设置初始选中状态
// 设置自定义 data-* 属性
inputEl.dataset.onstyle = onStyle;
inputEl.dataset.offstyle = offStyle;
inputEl.dataset.on = onText;
inputEl.dataset.off = offText;
inputEl.dataset.size = "small"; // 示例：设置大小为 'small'
// 将 input 元素添加到 DOM
const switchWrapper = document.createElement("div");
switchWrapper.className = "form-group";
const labelEl = document.createElement("label");
labelEl.setAttribute("for", uniqueId);
labelEl.textContent = `自定义开关 ${switchCounter}: `;
switchWrapper.appendChild(labelEl);
switchWrapper.appendChild(inputEl);
host.appendChild(switchWrapper);
// 初始化 Bootstrap Toggle
$(`#${uniqueId}`).bootstrapToggle();
console.log(`已添加并初始化自定义开关: ${uniqueId}`);
}4. 完整代码示例
将上述JavaScript函数放置在HTML文件中的
动态添加Bootstrap Toggle开关
动态添加Bootstrap Toggle开关示例
点击下方按钮添加开关：
