Remember that `checked` is a [boolean attribute][2], meaning it's presence alone determines whether it is applied. In HTML5, you can use the [empty attribute syntax][3] 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:



<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>



    $("input.switch").bootstrapSwitch();

[![screenshot][1]][1]

### Working Demo in Stack Snippets & [jsFiddle][5]





    $("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>



---
### Further Reading

* [Bootstrap Switch Docs][4]


[1]: https://i.stack.imgur.com/Aejjw.png
[2]: https://www.w3.org/TR/2012/WD-html5-20121025/common-microsyntaxes.html#boolean-attribute
[3]: https://html.spec.whatwg.org/multipage/syntax.html#attributes-2
[4]: https://bttstrp.github.io/bootstrap-switch/options.html
[5]: http://jsfiddle.net/KyleMit/nn6dU/

I am using this [bootstrap switch library](http://www.bootstrap-switch.org/).

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">


Bootstrap Switch - ON state

First of all, the data attributes use hyphens (`-`), not underscores (`_`).  
Also "switch-large" is not a permissible value for the `size` option, which takes the following values:

> null, 'mini', 'small', 'normal', 'large'

More importantly, a large control doesn't actually do that much to change the allowable size.  You'll have to override the control width like this:



    .bootstrap-switch-large{
        width: 200px;
    }

All the control widths are based off of percents of their parent, so everything else should still render fine.



    <input type="checkbox" class="switch"
           data-on-text="normal"
           data-off-text="abnormal"
           data-size="large" />

## [Demo in jsFiddle][fiddle]

[![screenshot][screenshot]][fiddle-show]

[screenshot]: http://i.imgur.com/bQ5aqUw.gif
[fiddle]: http://jsfiddle.net/KyleMit/VTv2j/
[fiddle-show]: http://jsfiddle.net/KyleMit/VTv2j/show

I am using twitter bootstrap-switch plugin in to show a checkbox with two options. It works well for checkboxes with small label text like "yes/no". However, when it comes to bigger label text like "Normal/Abnormal", then part of text is not visible to the user.

I tried to use the [`data_size` attribute][docs]:

    @Html.CheckBoxFor(model => Model.keyitems[i].Status,
                      new { @checked = "checked",
                            @data_on_text = "Normal",
                            @data_off_text = "Abnormal",
                            @data_size = "switch-large" })

But it didn't work. 

How can I make the plugin support longer text as well?

[docs]: http://www.bootstrap-switch.org/documentation-3.html