本教程详细介绍了如何利用纯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()方法来初始化它。

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开关示例

点击下方按钮添加开关：