如何仅用JavaScript动态添加Bootstrap开关组件

目标组件示例 #

你需要实现的开关组件结构如下：

<div class="toggle btn btn-primary" data-toggle="toggle" role="button" style="width: 61.0781px; height: 38px;">
  <input type="checkbox" checked="" data-toggle="toggle" data-onstyle="primary">
  <div class="toggle-group">
    <label class="btn btn-primary toggle-on">
      On
    </label>
    <label class="btn btn-light toggle-off">
      Off
    </label>
    <span class="toggle-handle btn btn-light">
    </span>
  </div>
</div>

该组件基于Bootstrap4 Toggle组件库实现。

实现方法 #

和你提供的普通按钮添加逻辑类似，但Bootstrap开关组件需要额外执行初始化步骤，才能生成完整的样式和交互功能。

完整实现代码 #

以下是包含测试页面的完整代码：

HTML 基础结构

<!-- 引入必要的样式与脚本资源 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>

<!-- 用于承载动态添加的开关 -->
<div id="toggleContainer"></div>
<!-- 触发添加操作的按钮 -->
<button onclick="addBootstrapToggle()" class="btn btn-secondary mt-3">添加新开关</button>

JavaScript 动态添加函数

function addBootstrapToggle() {
  // 创建核心checkbox元素
  const toggleInput = document.createElement('input');
  toggleInput.type = 'checkbox';
  // 设置组件必要属性
  toggleInput.setAttribute('data-toggle', 'toggle');
  toggleInput.setAttribute('data-onstyle', 'primary');
  // 可选：设置默认选中状态
  toggleInput.checked = true;

  // 将元素添加到页面容器
  const container = document.getElementById('toggleContainer');
  container.appendChild(toggleInput);

  // 关键步骤：初始化Bootstrap Toggle组件，自动生成完整结构与交互
  $(toggleInput).bootstrapToggle();
}

注意事项 #

• 必须确保页面已正确引入Bootstrap、jQuery以及Bootstrap4 Toggle的CSS和JS资源，否则组件无法正常渲染。
• 动态创建checkbox后，必须调用bootstrapToggle()方法，该方法会自动生成你需要的外层div、toggle-group等嵌套结构，并绑定开关交互事件。

内容的提问来源于stack exchange，提问作者Artur Z