Monthly Archives: November 2014

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): jquery-bootstrap-locked-switch

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

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