JQuery based on-off switch for websites
JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Failed to load latest commit information.
css Added files Sep 28, 2015
js Removed extra comma from object literal Oct 18, 2016
README.md Updated readme Feb 9, 2016
demo.html Listen for native events Feb 9, 2016



JQuery based on-off switch for websites


###1. Include code in

  <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="js/on-off-switch.js"></script>
    <script type="text/javascript" src="js/on-off-switch-onload.js"></script>
    <link rel="stylesheet" type="text/css" href="css/on-off-switch.css"/>

###2a Create Switch manually

<div class="checkbox-container">
    <input type="checkbox" id="on-off-switch" name="switch1" checked>
<div id="listener-text">

<script type="text/javascript">
    new DG.OnOffSwitch({
        el: '#on-off-switch',
        textOn: 'Sync On',
        textOff: 'Off',
        listener:function(name, checked){
            $("#listener-text").html("Listener called for " + name + ", checked: " + checked);

2a Auto create switchces

This done by including the on-off-switch-onload.js file in the .

Then assign the checkboxes to the css class custom-switch.

    <input type="checkbox" class="custom-switch" name="checkbox1" id="checkbox1">


The following public methods are available: toggle: Toggles the checked state of the switch. check: Set the switch to checked. uncheck: Set the switch to unchecked. getValue: Returns true when checked, false otherwise.

###Access automatically created checkboxes. The automatically created switches can be accessed using the





or by name


Ie. using the hash(#) prefix for ids.