twitter-bootstrap - 自举开关 - 开启状态

Question

我正在使用这个 bootstrap switch library .

我的 html 中有一个复选框。现在，它始终显示为 OFF 状态，即使在加载文档时它的 checked 属性设置为 true。

除此之外我还需要做什么？

编辑 - 我的理解是 Switch 在输入类型复选框字段周围添加一个容器，其类为 bootstrap-switch-off默认情况下，与复选框字段的选中属性值无关。

<input type="checkbox" name="my-custom" id="Switch" checked="true">

Answer 1

请记住 checked是 boolean attribute ，这意味着它的存在决定了它是否被应用。在 HTML5 中，您可以使用 empty attribute syntax作为checked或 checked="" ，但我会警告不要使用 checked="true" , 正如它所暗示的 checked="false"实际上会做点什么。鉴于 checked='potato'同样有效。
以下代码应使用默认打开或关闭的复选框初始化 Bootstrap 开关:

<input type="checkbox" class="switch" checked /> <!-- on  -->
<input type="checkbox" class="switch" />         <!-- off -->

$("input.switch").bootstrapSwitch();

Stack Snippets 和 jsFiddle 中的工作演示

$("input.switch").bootstrapSwitch();

body { padding: 15px; }

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/js/bootstrap-switch.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap2/bootstrap-switch.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css">

<div >
    <label for="chk1">Default On:</label>
    <input type="checkbox" class="switch" id="chk1" checked />
</div>

<div>
    <label for="chk2">Default Off:</label>
    <input type="checkbox" class="switch" id="chk2" />
</div>

延伸阅读

Bootstrap Switch Docs