LC Switch

Javascript Plugin

Superlight javascript plugin improving forms look and functionality.
Vanilla javascript. No dependencies. Everything in a single 7KB file, all inclusive!

Basically turning this ..

.. into this!

.. and using options ..

Basic Implementation

Vanilla javascript. No dependencies. Just include one file and enjoy!

				
					<!doctype html>
<html>
    <head></head>
    <body>
        <form>
           <input type="checkbox" name="sample" value="1" />
        </form>

        <script src="lc_switch.min.js" type="text/javascript"></script>

        <script type="text/javascript">
        lc_switch('input[type=checkbox]');
        </script>
    </body>
</html>
				
			

Options

Here are listed available options with default values

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

    // (string) "checked" status label text
    on_txt      : 'ON',
    
    // (string) "not checked" status label text
    off_txt     : 'OFF',

    // (string) custom "on" color. Supports also gradients
    on_color    : false,

    // (bool) whether to enable compact mode
    compact_mode: false
});
				
			

Public Functions

Available public functions to be called on initialized inputs

				
					const inputs = document.querySelectorAll('input[type=checkbox], input[type=radio]');
lc_switch(inputs):


// checks the field
lcs_on(inputs);

// unchecks the field
lcs_off(inputs);

// toggles targeted field
lcs_toggle(inputs);


// disables the field
lcs_disable(inputs);

// enables the field
lcs_enable(inputs);


// refreshes plugin interface retrieving input attributes (useful while changing HTML attributes directly)
lcs_update(inputs);

// destroys plugin initialization showing HTML fields again
lcs_destroy(inputs);
				
			

Public Events

Available public functions to be called on initialized inputs

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

    // triggered each time input status changes (checked and disabled)
    el.addEventListener('lcs-statuschange', ...);
    
    
    // triggered each time input is checked
    el.addEventListener('lcs-on', ...);
    
    // triggered each time input is uncheked
    el.addEventListener('lcs-off', ...);
    
    
    // triggered each time input is enabled
    el.addEventListener('lcs-enabled', ...);
    
    // triggered each time input is disabled
    el.addEventListener('lcs-disabled', ...);

});
				
			

Let's get in touch!

Features list