Animated iOS Style Switch With jQuery And Checkbox - netlivaSwitch

netlivaSwitch is a tiny, easy-to-implement, fully configurable jQuery plugin for creating animated, iOS style switches from normal checkboxes.

Comes with a super smooth transition effect when you toggle between states. Also compatible with the Bootstrap framework.

Install and download:

<link rel="stylesheet" href="/path/to/src/css/netliva_switch.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/src/js/netliva_switch.js"></script>

How to use it:

1. To get started, insert the netlivaSwitch plugin's files into the HTML file.

<link rel="stylesheet" href="/path/to/src/css/netliva_switch.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/src/js/netliva_switch.js"></script>

2. Just add the netliva-switch attribute to your checkbox input and the plugin will take care of the rest.

<input type="checkbox" netliva-switch />

3. Determine the switch size with the data-size attribute. Accpeted values: 'mini'.

<input type="checkbox" 
       netliva-switch 
       data-size="mini" 
/>

4. Customize the On/Off labels.

<input type="checkbox"
       netliva-switch
       data-active-text="JQuery"
       data-passive-text="Script"
/>

5. Customize the background colors.

<input type="checkbox" 
       netliva-switch 
       data-active-color="#222"
       data-passive-color="#333"
/>

6. The plugin also supports Bootstrap's color variables.

<input type="checkbox" 
       netliva-switch 
       data-active-color="primary"
       data-passive-color="danger"
/>

7. Specify the width of the switch.

<input type="checkbox" 
       netliva-switch 
       data-width="300px"
/>

8. You can also initialize the switch plugin via JavaScript.

$("#myCheckbox").netlivaSwitch({
  'size': 'mini',
  'active-text': 'jQuery',
  'passive-text': 'Script',
  'active-color': '#333',
  'passive-color': '#666',
  'width' : '120px'
});

9. Set and get the Check state.

// get state
$("#myCheckbox").netlivaSwitch('state');

// toggle on
$("#myCheckbox").netlivaSwitch('state', true);

// toggle off
$("#myCheckbox").netlivaSwitch('state', false);

10. Fire an event when the state is changed.

$("#myCheckbox").on('netlivaSwitch.change', function(event, state, element) {
  console.log(state);
});

Changelog:

2020-07-05

• Added vertical alignment

---

This awesome jQuery plugin is developed by netliva. For more Advanced Usages, please check the demo page or visit the official website.