如何使用 jQuery 分配 Bootstrap Switch

Bootstrap Switch 是一个可定制的、完美的开关和复选框，可以使用 jQuery 分配。

步骤

步骤 1：引入文件

<link href="https://cdn.bootcss.com/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script>

在 HTML 文件的头部引入 CSS 和 JS 文件。

步骤 2：添加 HTML 元素

<input type="checkbox" name="my-checkbox" checked>

添加 HTML 元素，如开关或复选框。

步骤 3：初始化 Bootstrap Switch

$(function() {
  $("input[name='my-checkbox']").bootstrapSwitch();
});

通过使用 jQuery 可以找到您的 HTML 元素，并使用 bootstrapSwitch() 函数来初始化 Bootstrap Switch。

定制

您还可以使用一些选项来自定义您的 Bootstrap Switch：

文字和颜色

<input type="checkbox" name="my-checkbox" checked data-on-text="On" data-off-text="Off" data-on-color="success" data-off-color="danger">

使用 data-on-text 和 data-off-text 来设置在开关或复选框上显示的文本，data-on-color 和 data-off-color 来设置开关或复选框的颜色。

尺寸

<input type="checkbox" name="my-checkbox" checked data-size="large">

使用 data-size 来设置开关或复选框的尺寸。

异步开关

<input type="checkbox" name="my-checkbox" checked data-on-switch-change="asyncFunction()">

使用 data-on-switch-change 来捕获 Bootstrap Switch 的 switchChange.bootstrapSwitch 事件，并在回调函数中执行异步操作。

总结

通过这些步骤和选项，您可以轻松的使用 jQuery 分配 Bootstrap Switch 并通过自定义选项来控制和管理您的开关和复选框。