纯J*aScript动态添加Bootstrap Toggle开关组件教程_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

纯J*aScript动态添加Bootstrap Toggle开关组件教程

2025-10-13

浏览次数：次

返回列表

纯JavaScript动态添加Bootstrap Toggle开关组件教程

本教程详细介绍了如何使用纯j*ascript动态创建并激活bootstrap toggle开关组件。通过创建html `input`元素并设置必要的`data-toggle`属性，然后将其添加到dom中，并最终利用jquery的`bootstraptoggle()`方法对其进行初始化，实现页面元素的按需动态生成与功能激活。

在现代Web应用开发中，动态地添加或移除页面元素以响应用户操作或数据变化是常见的需求。Bootstrap Toggle是一个流行的jQuery插件，它能将标准的HTML复选框转换为美观的开关按钮。本教程将深入探讨如何仅使用J*aScript（结合其依赖jQuery）来动态创建并激活这些Bootstrap Toggle开关组件。

环境准备

为了成功实现动态添加Bootstrap Toggle开关，您需要引入以下CSS和J*aScript库。这些库应在您的HTML文件的

或标签结束前引入，并确保jQuery在Bootstrap和Bootstrap Toggle之前加载。

<!-- 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 -->
<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 (bundle includes Popper.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，通过其id属性在J*aScript中被引用。

<div id="switch-host" class="p-3 border rounded">
  <h3>动态开关容器</h3>
</div>
<button id="addSwitchButton" class="btn btn-primary mt-3">添加新开关</button>

J*aScript核心逻辑

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

创建input元素: 使用document.createElement("input")创建一个新的HTML input元素。
设置属性: 为input元素设置必要的属性，如type="checkbox"和data-toggle="toggle"。data-toggle="toggle"是告诉Bootstrap Toggle插件需要处理这个元素的关键属性。您还可以设置其他属性，例如checked来定义初始状态，data-onstyle、data-offstyle来定义开关的样式，以及id或name等。
添加到DOM: 将创建好的input元素追加到预设的父级容器中。
初始化Toggle: 这是最关键的一步。仅仅将input元素添加到DOM并不能使其变为Bootstrap Toggle的样式。您必须使用jQuery选择器选中新添加的input元素，并调用.bootstrapToggle()方法来激活其功能和样式。

以下是实现上述逻辑的J*aScript函数：

秀脸FacePlay

一款集成AI换脸、照片跳舞等多种AI特效玩法的App

124 查看详情秀脸FacePlay

/**
 * 动态添加一个Bootstrap Toggle开关到指定的宿主元素。
 * @param {string} hostId - 宿主元素的ID。
 * @param {boolean} initialState - 开关的初始状态（true为开，false为关）。
 */
function addBootstrapSwitch(hostId, initialState = false) {
  const host = document.getElementById(hostId);
  if (!host) {
    console.error(`宿主元素ID为 "${hostId}" 不存在。`);
    return;
  }

  // 1. 创建 input 元素
  const inputEl = document.createElement("input");
  inputEl.setAttribute("type", "checkbox");
  inputEl.setAttribute("data-toggle", "toggle");
  inputEl.checked = initialState; // 设置初始状态

  // 可选：设置其他属性，例如样式、文本等
  inputEl.setAttribute("data-onstyle", "success");
  inputEl.setAttribute("data-offstyle", "danger");
  inputEl.setAttribute("data-on", "启用");
  inputEl.setAttribute("data-off", "禁用");
  inputEl.id = `dynamicSwitch-${Date.now()}`; // 确保ID唯一性

  // 创建一个包含开关的div，方便布局
  const switchWrapper = document.createElement("div");
  switchWrapper.className = "mb-2"; // 添加一些底部边距

  // 2. 将 input 元素添加到 wrapper
  switchWrapper.appendChild(inputEl);

  // 3. 将 wrapper 添加到宿主
  host.appendChild(switchWrapper);

  // 4. 初始化 Bootstrap Toggle：这是关键步骤！
  // 必须在元素被添加到DOM后，才能对其调用 bootstrapToggle() 方法
  $(inputEl).bootstrapToggle();

  // 示例：为动态添加的开关绑定事件
  $(inputEl).change(function() {
    console.log(`开关 ${inputEl.id} 的状态变为: ${$(this).prop('checked') ? '开' : '关'}`);
  });
}

// 绑定按钮点击事件，动态添加开关
document.addEventListener('DOMContentLoaded', () => {
  const addButton = document.getElementById('addSwitchButton');
  if (addButton) {
    let switchCount = 0;
    addButton.addEventListener('click', () => {
      addBootstrapSwitch("switch-host", switchCount % 2 === 0); // 交替初始状态
      switchCount++;
    });
  }
});

完整示例代码

将所有上述代码片段组合起来，您将得到一个完整的HTML文件，可以在浏览器中直接运行以测试动态添加功能。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯J*aScript动态添加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">

    <style>
        body { padding: 20px; }
        .toggle.btn { min-width: 100px; } /* 确保开关有足够的宽度 */
    </style>
</head>
<body>

    <div class="container">
        <h2 class="mb-4">动态添加Bootstrap Toggle开关</h2>

        <div id="switch-host" class="p-3 border rounded mb-4">
            <p>点击下方按钮，将在此容器中添加新的Bootstrap Toggle开关。</p>
        </div>

        <button id="addSwitchButton" class="btn btn-primary">添加新开关</button>
    </div>

    <!-- 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 (bundle includes Popper.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>
        /**
         * 动态添加一个Bootstrap Toggle开关到指定的宿主元素。
         * @param {string} hostId - 宿主元素的ID。
         * @param {boolean} initialState - 开关的初始状态（true为开，false为关）。
         */
        function addBootstrapSwitch(hostId, initialState = false) {
            const host = document.getElementById(hostId);
            if (!host) {
                console.error(`宿主元素ID为 "${hostId}" 不存在。`);
                return;
            }

            // 1. 创建 input 元素
            const inputEl = document.createElement("input");
            inputEl.setAttribute("type", "checkbox");
            inputEl.setAttribute("data-toggle", "toggle");
            inputEl.checked = initialState; // 设置初始状态

            // 可选：设置其他属性，例如样式、文本等
            inputEl.setAttribute("data-onstyle", "success");
            inputEl.setAttribute("data-offstyle", "danger");
            inputEl.setAttribute("data-on", "启用");
            inputEl.setAttribute("data-off", "禁用");
            inputEl.id = `dynamicSwitch-${Date.now()}`; // 确保ID唯一性

            // 创建一个包含开关的div，方便布局
            const switchWrapper = document.createElement("div");
            switchWrapper.className = "mb-2 d-flex align-items-center"; // 添加一些底部边距和对齐

            // 添加一个标签来描述开关
            const labelEl = document.createElement("label");
            labelEl.setAttribute("for", inputEl.id);
            labelEl.textContent = `开关 ${inputEl.id.split('-')[1]}: `;
            labelEl.className = "mr-2"; // 右边距

            // 2. 将 input 元素添加到 wrapper
            switchWrapper.appendChild(labelEl);
            switchWrapper.appendChild(inputEl);

            // 3. 将 wrapper 添加到宿主
            host.appendChild(switchWrapper);

            // 4. 初始化 Bootstrap Toggle：这是关键步骤！
            // 必须在元素被添加到DOM后，才能对其调用 bootstrapToggle() 方法
            $(inputEl).bootstrapToggle();

            // 示例：为动态添加的开关绑定事件
            $(inputEl).change(function() {
                console.log(`开关 ${inputEl.id} 的状态变为: ${$(this).prop('checked') ? '开' : '关'}`);
                // 可以在这里执行其他逻辑，例如更新后端数据
            });
        }

        // 绑定按钮点击事件，动态添加开关
        document.addEventListener('DOMContentLoaded', () => {
            const addButton = document.getElementById('addSwitchButton');
            if (addButton) {
                let switchCount = 0;
                addButton.addEventListener('click', () => {
                    addBootstrapSwitch("switch-host", switchCount % 2 === 0); // 交替初始状态
                    switchCount++;
                });
            }
        });
    </script>

</body>
</html>

注意事项

依赖顺序: 确保jQuery在Bootstrap J*aScript和Bootstrap Toggle J*aScript之前加载。如果顺序错误，插件将无法正常工作。
ID唯一性: 如果您动态添加多个开关，并且每个开关都需要一个唯一的标识符（例如，用于事件处理或数据绑定），请确保为每个新创建的input元素生成一个唯一的id。在示例中，我们使用了Date.now()来辅助生成唯一ID。
事件处理: 对于动态添加的元素，直接绑定事件（如inputEl.addEventListener('change', ...)）是有效的。如果您需要使用事件委托来处理大量动态元素的事件，可以考虑在父级容器上绑定事件，并利用事件冒泡来捕获子元素的事件。例如：
```
$('#switch-host').on('change', 'input[data-toggle="toggle"]', function() {
    console.log(`通过事件委托捕获到开关状态变化: ${$(this).prop('checked')}`);
});
```
性能: 大量动态添加DOM元素可能会影响页面性能。如果需要添加成百上千个开关，请考虑虚拟化或分页等优化策略。

总结

通过上述教程，我们详细学习了如何使用纯J*aScript结合jQuery来动态创建并激活Bootstrap Toggle开关组件。关键在于创建正确的HTML input元素，设置data-toggle="toggle"属性，将其添加到DOM，并最终通过调用$(element).bootstrapToggle()方法来初始化其功能。掌握这一技术，可以帮助开发者构建更加灵活和交互性强的Web界面。

以上就是纯J*aScript动态添加Bootstrap Toggle开关组件教程的详细内容，更多请关注其它相关文章！

# 对其 # 景区营销推广方案例文 # 上海律师网站建设技术 # 学seo的最终目的 # 黑帽seo排 # 去哪里找网站推广的人 # 文昌网站制作和推广 # 南京关键词排名电话多少 # 手机端网站建设步骤 # 免费seo推广优化 # 销售人员营销推广方案 # 可选 # 自定义 # 不存在 # 将其 # 是一个 # css # 创建一个 # 复选框 # 这是 # 绑定 # 浏览器 # npm # go # git # bootstrap # js # html # jquery # java # javascript