JavaScript Plugin For Sliding Toggle Switches - LC Switch

LC Switch is a tiny jQuery and Vanilla JS plugin that converts default checkbox & radio inputs into pretty switches or toggle buttons, with smooth sliding effects powered by CSS3 transitions.

Table Of Contents:

• jQuery Version
• Vanilla JS Version

How to use it (jQuery):

1. Import jQuery library and the jQuery LC Switch plugin's files into your project.

<script src="jquery.min.js"></script>
<script src="lc_switch.js"></script>
<link rel="stylesheet" href="lc_switch.css" />

2. Call the plugin on the checkbox & radio inputs and done. The plugin will take care of the rest.

$('input').lc_switch();

3. Public functions.

// toggle on
$('input').lcs_on();

// toggle off
$('input').lcs_off();

// destroy
$('input').lcs_destroy();

4. Events.

// triggered each time a field changes status
$('body').delegate('.lcs_check', 'lcs-statuschange', function() {
  var status = ($(this).is(':checked')) ? 'checked' : 'unchecked';
  console.log('field changed status: '+ status );
});

// triggered each time a field is checked
$('body').delegate('.lcs_check', 'lcs-on', function() {
  console.log('field is checked');
});

// triggered each time a is unchecked
$('body').delegate('.lcs_check', 'lcs-off', function() {
  console.log('field is unchecked');
});

How to use it (Vanilla):

1. Download the LC Switch V2 and import the lc_switch.js into the document.

<script src="lc_switch.js"></script>

2. Attach the plugin to the checkbox & radio inputs and done.

lc_switch('input[type=checkbox], input[type=radio]');

3. Possible plugin options to customize the switch.

lc_switch('input[type=checkbox], input[type=radio]', {

    // ON text
    on_txt: 'ON',
    
    // OFF text
    off_txt: 'OFF',

    // Custom ON color. Supports gradients
    on_color: false,

    // enable compact mode
    compact_mode: false

});

4. API methods

// toggle on
lcs_on(instance);

// toggle off
lcs_off(instance);

// toggle target field
lcs_toggle(instance);

// disable
lcs_disable(instance);

// enable
lcs_enable(instance);

// update
lcs_update(instance);

// destroy
lcs_destroy(instance);

5. Event handlers

document.querySelectorAll('input[type=checkbox], input[type=radio]').forEach(function(el) {

    el.addEventListener('lcs-statuschange', function(){
      // ...
    });

    el.addEventListener('lcs-on', function(){
      // ...
    });

    el.addEventListener('lcs-off', function(){
      // ...
    });
    
    el.addEventListener('lcs-enabled', function(){
      // ...
    });

    el.addEventListener('lcs-disabled', function(){
      // ...
    });

});

Changelog:

v2.0.3 (2021-03-18)

• Events now "bubbles" for better (jQuery) compatibility

v2.0.2 (2021-03-02)

• fixed lcs-on event at line 261

v2.0.1 (2021-02-09)

• fixed minor bugs

v2 (2021-02-02)

• 100% vanilla javascript
• unique JS file
• added enable/disable functions
• added lcs_update() function to sync HTML changes
• added compact mode
• added custom "on" color

2018-09-13

• v1.1

---

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