Creating an ON/OFF switch using bootstrap and jQuery

In some projects that I work on, I need a quick way of adding some cool-looking user-friendly on/off switch. Checkboxes are ugly! And I don’t want to add a new component/plugin to the already loaded pages. So, I wrote some quick code snippet for a switch based on Bootstrap 3 and jQuery. Here is the HTML code:

And here is the jQuery code (should be placed inside any jQuery DOM loaded block):

Here is what the output looks like when the page loads (the default state is locked):

And when the switch is clicked, here is how it looks like (unlocked):

Here is a demo of the switch in action. Have fun!

Published by Genedy

I'm the founder of BigProf Software. We're a tiny team of developers who create tools that make it easy (and affordable) for anyone to create connected business applications that work from any device with a browser.

4 replies on “Creating an ON/OFF switch using bootstrap and jQuery”

  1. Hello,
    how can i use this in Appgini, where should i integrate this code?

    1. Hmm … As a general rule, any JavaScript code you want to add to your AppGini app can be added in any of these locations:
      * hooks/header-extras.php or hooks/footer-extras.php … would apply to all pages.
      * hooks/tablename-dv.js … would apply to the detail view of the specified table.
      * hooks/tablename-tv.js … would apply to the table view of the specified table.
      * The tablename_dv(), tablename_header() or tablename_footer() hook functions in hooks/tablename.php … would apply to the specified table — use this if you want to add a server-side check, otherwise it’s easier to use any of the above alternatives.

      For AppGini, please replace $ in the code of the post above with $j.

        1. It depends on where you want to place the switch. I’d recommend using JS code as well to accurately place the HTML code. In this case, you could place the JS code in any of the above-mentioned locations. For example, this would place the switch to the right of the buttons above the table view:

Comments are closed.