Download Basic ON/OFF Toggle Switches In jQuery – Switcher

This time I will share jQuery Plugin and tutorial about Basic ON/OFF Toggle Switches In jQuery – Switcher, hope it will help you in programming stack.

File Size:	5.53 KB
Views Total:	10793
Last Update:	3 years ago
Publish Date:	3 years ago
Official Website:	Go to website
License:	MIT

Demo Download

Switcher is an ultra-light jQuery plugin that transforms the native Checkbox and Radio Button elements into iOS inspired on/off toggle switches just with a JS call.

Click on the switches to toggle between ON and OFF states with a smooth transition effect based on CSS3.

How to use it:

1. Load the stylesheet switcher.css in the head, and the JavaScript file switcher.js after jQuery library.

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

2
<script src="https://code.jquery.com/jquery-3.3.1.min.js"

3
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"

4
        crossorigin="anonymous">

5
</script>

6
<script src="js/jquery.switcher.js"></script>

2. Initialize the plugin to apply the plugin to all the checkboxes and radio buttons in the document.

01
<h2>Checkboxes</h2>

02
<div class="form-check form-check-inline">

03
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">

04
</div>

05
<div class="form-check form-check-inline">

06
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">

07
</div>

08
<div class="form-check form-check-inline">

09
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>

10
</div>

11
 
12
<h2>Radio Buttons</h2>

13
<div class="form-check form-check-inline">

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

15
</div>

16
<div class="form-check form-check-inline">

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

18
</div>

19
<div class="form-check form-check-inline">

20
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>

21
</div>

1
$(function(){

2
 
3
   $.switcher();

4
 
5
});

3. You can also initialize the plugin on specific checboxes or radio buttons.

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

2
 
3
$.switcher('input[type=radio]');

4. Override the default CSS to create your own styles.

01
.ui-switcher {

02
  background-color: #bdc1c2;

03
  display: inline-block;

04
  height: 20px;

05
  width: 48px;

06
  border-radius: 10px;

07
  box-sizing: border-box;

08
  vertical-align: middle;

09
  position: relative;

10
  cursor: pointer;

11
  transition: border-color 0.25s;

12
  margin: -2px 4px 0 0;

13
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.15);

14
}

15
 
16
.ui-switcher:before {

17
  font-family: sans-serif;

18
  font-size: 10px;

19
  font-weight: 400;

20
  color: #ffffff;

21
  line-height: 1;

22
  display: inline-block;

23
  position: absolute;

24
  top: 6px;

25
  height: 12px;

26
  width: 20px;

27
  text-align: center;

28
}

29
 
30
.ui-switcher:after {

31
  background-color: #ffffff;

32
  content: '