开/关：开关按钮的Bootstrap实现

Question

这是我的代码-

<div id="normal-toggle-button" class="toggle-button" style="width: 100px; height: 25px;">
            <div style="left: 0px; width: 150px;"><input type="checkbox" checked="checked"><span class="labelLeft" style="width: 50px; height: 25px; line-height: 25px;">ON</span><label for="" style="width: 50px; height: 25px;"></label><span class="labelRight" style="width: 50px; height: 25px; line-height: 25px;">OFF </span></div>
        </div>
    </div>

脚本 -

$(document).ready(function() {
        $('#normal-toggle-button').toggleButtons();
    });

我希望您能在此页面上提供一个基本按钮 - 开关按钮。

我的工作进行得很顺利，但仍然有一些遗漏。

在这里检查- Fiddle。

- Manoz

---

你需要给它添加样式！ - syrkull

我认为这篇文章会很有帮助。https://dev59.com/Im855IYBdhLWcg3wuG-W - Sudix

Answer 1

使用bootstrapSwitch的最简单方法：

演示

<link href="bootstrap-switch.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="bootstrap-switch.js"></script>

<input type="checkbox">
<script>
  $('input:checkbox').bootstrapSwitch();
</script>

- Steely Wing

---

看起来这个不再起作用了。也许是因为最新版本的Bootstrap出了问题？ - Ryan Langton

@WingLeong 我想在按钮状态没有手动更改之前保存它的状态。这可行吗？ - user983983

@user983983，使用JavaScript中的localStorage - http://diveintohtml5.info/storage.html - Manoz

Answer 2

类很重要

你之前把类名写成了"toggle-button"，现在把它改成"switch"

这是你更新后的示例代码: http://jsfiddle.net/WvRZw/10/

 <div id="normal-toggle-button" class="toggle-button"....

改为

  <div id="normal-toggle-button" class="switch" ....

CSS/JavaScript 包含

您需要包含 Bootstrap 的 JavaScript 和 CSS（请参见资源部分） （关于包含 JavaScript 和 CSS：如何使 Bootstrap 按钮显示活动状态？）

- Amir T

---

好的，你的代码中都是关于“toggle-button”的。同时还需要基础的Bootstrap js/css。 - Amir T