Simple jQuery Plugin For On/Off Toggle Buttons – Switcher

Switcher js is a very lightweight and easy to use jQuery plugin that converts native Checkbox and Radio button into styling on/off toggle switches easily. It includes basic CSS styling for the switch buttons so you don’t need to do anything just link this to your project and it is ready to use. You can easily modify the style of switches according to your needs.

Features:

• Transform Checkbox and Radio button into a toggle switch.
• Lightweight and easy to implement.
• Smooth transition effect based on CSS3.
• Supports on all major browsers and devices.

How to use it:

1. Include the Javascript jquery.switcher.js at the bottom of the web page.

<script src="path/to/jquery.switcher.js"></script>

2. Include the CSS switcher.css in the header of the page.

<link rel="stylesheet" href="path/to/switcher.css">

3. Add the basic HTML to the page.

<div class="form-check form-check-inline">
   <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
</div>

<div class="form-check form-check-inline">
   <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
</div>

<div class="form-check form-check-inline">
   <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
</div>

<div class="form-check form-check-inline">
   <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
</div>

<div class="form-check form-check-inline">
   <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
</div>

<div class="form-check form-check-inline">
   <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
</div>

4. Initialize the plugin and we’re ready to go.

$(function(){
  $.switcher();
});

Filter individual elements using the jQuery style:

$.switcher('input[type=checkbox]');