Bootstrap Switch - ON state

I am using this bootstrap switch library.

I have a checkbox in my html. Now, it is always showing in the OFF state, even though its checked property is set to true when the document is loaded.

What do I need to do besides that?

Edit - What I understand is Switch is adding a container around input type checkbox field with class bootstrap-switch-off by default, irrespective of the value of checked attribute that goes by with the checkbox field.

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

Remember that checked is a boolean attribute, meaning it's presence alone determines whether it is applied. In HTML5, you can use the empty attribute syntax as either checked or checked="", but I would caution against using checked="true", as it implies checked="false" would actually do something. Whereas checked='potato' is equally valid.

The following code should initialize bootstrap switch with checkboxes defaulted on or off:

<!-- language: lang-html --> <pre><code>&lt;input type=&quot;checkbox&quot; class=&quot;switch&quot; <b><i>checked</i></b> /&gt; &lt;!-- on --&gt &lt;input type=&quot;checkbox&quot; class=&quot;switch&quot; /&gt; &lt;!-- off --&gt </code></pre> <!-- language: lang-js-->

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

Working Demo in Stack Snippets & jsFiddle

<!-- begin snippet: js hide: true console: true babel: false --> <!-- language: lang-js -->

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

<!-- language: lang-css -->

body { padding: 15px; }

<!-- language: lang-html -->

<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>

<!-- end snippet -->

---

Further Reading

• Bootstrap Switch Docs