JavaScript checkboxes made easy
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>
<script>document.documentElement.classList.remove('no-js');document.addEventListener('DOMContentLoaded',function(){var lazyImages=[].slice.call(document.querySelectorAll('img[loading="lazy"]'));if('IntersectionObserver' in window){var lazyImageObserver=new IntersectionObserver(function(entries){entries.forEach(function(entry){if(entry.isIntersecting){var lazyImage=entry.target;lazyImage.classList.add('loaded');lazyImageObserver.unobserve(lazyImage)}})});lazyImages.forEach(function(lazyImage){lazyImageObserver.observe(lazyImage)})}else{lazyImages.forEach(function(img){img.classList.add('loaded')})}});</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', ...);
});
