I use lc_switch.js and have to get rid of "Unsafe assignment to innerHTML" warning. So i changed this part of the code : https://github.com/LCweb-ita/LC-switch/blob/02a930ee1d82c69d9f1f44383eb8516447158b86/lc_switch.js#L165

            // labels structure
            const on_label 	= (options.on_txt) ? '<div class="lcs_label lcs_label_on">'+ options.on_txt +'</div>' : '',
                  off_label = (options.off_txt) ? '<div class="lcs_label lcs_label_off">'+ options.off_txt +'</div>' : '';

 
            // default states
            let classes = 'lcs_'+ el.getAttribute('type');
                
            classes += (el.checked) ? ' lcs_on' : ' lcs_off'; 
            
            if(el.disabled) {
                classes += ' lcs_disabled';
            } 
            
            
            // enabled and apply custom color?
            const custom_style = (options.on_color && el.checked) ? 'style="background: '+ options.on_color +';"' : '',
                  custom_on_col_attr = (options.on_color) ? 'data-on-color="'+ options.on_color +'"' : '';
            

            // wrap and append
            const wrapper = document.createElement('div');
            
            wrapper.classList.add('lcs_wrap');
            wrapper.innerHTML = 
            '<div class="lcs_switch '+ classes +'" '+ custom_on_col_attr +' '+ custom_style +'>' +
                '<div class="lcs_cursor"></div>' +
                on_label + off_label +
            '</div>';

To not use variable assignment to innerHTML

        ```
        // wrap and append MOD Removed Unsafe assignment to innerHTML by Netquik (https://github.com/netquik)
        const wrapper = document.createElement('div');
        wrapper.classList.add('lcs_wrap');

        const wrapper_inner = document.createElement('div');
        wrapper_inner.classList.add("lcs_switch", 'lcs_'+ el.getAttribute('type'), (el.checked) ? 'lcs_on' : 'lcs_off');
        if (el.disabled) wrapper_inner.classList.add('lcs_disabled');
        if (options.on_color) {
            wrapper_inner.setAttribute("data-on-color", options.on_color);
        }
        if (options.on_color && el.checked) {
            wrapper_inner.setAttribute("style", 'background: '+ options.on_color +';');
        }
        const wrapper_inner2 = document.createElement('div');
        wrapper_inner2.classList.add("lcs_cursor");
        wrapper_inner.appendChild(wrapper_inner2);
        if (options.on_txt) {
            const l_on = document.createElement('div');
            l_on.classList.add("lcs_label", "lcs_label_on");
            l_on.textContent = options.on_txt
            wrapper_inner.appendChild(l_on);
        }
        if (options.off_txt) {
            const l_off = document.createElement('div');
            l_off.classList.add("lcs_label", "lcs_label_off");
            l_off.textContent = options.off_txt
            wrapper_inner.appendChild(l_off);
        }
        wrapper.appendChild(wrapper_inner);

Not sure if it can be done better but here is working as expected.

The class 'test_class' on this 'input' element is getting ridden after calling the 'lc_switch() method'.

It is not possible to do proper styling if this is the case. You guyz should copy the class as well to the toggle button.

This is in response to issue #5 - I had a similar request, but as this module is made available to me via a form generator, I was not able to access the elements in CSS without there being a class on the parent element, which the form generator does not allow me to do. This will allow you to specify a class for the lcs_switch DIV that you can then reference in CSS to make the size changes you need to override the existing fixed sizes.

A disabled input initializes with an lcs_disabled class but if you want to programmatically enable it you need to remove the class and also remove the disabled attribute from the input.

Adding .lcs_enable() and .lcs_disable() methods would wrap these two changes into one method.

Sometimes there are differences between setting the state programmatically (eg on initialization) and setting the state on click. My application sets the initial state based on values from database but I need to change it based on parameters. The problem is that there is only one event so I can not distinguish between them. Any easy way to agregate an onclick event?

Hi i use your lib in an browser extension i wrote. Mozilla AMO reviewers rejected the add-on for some reasons among which:

This add-on is creating DOM nodes from HTML strings containing potentially unsanitized data, by assigning to innerHTML, jQuery.html, or through similar means. Aside from being inefficient, this is a major security risk. For more information, see https://developer.mozilla.org/en/XUL_School/DOM_Building_and_HTML_Insertion . Here are some examples that were discovered:

• libs/lc_switch.js#111

Is there a way to solve this? escaping html? Thanks

Hi - thanks for this great plugin! I forked it absent-mindedly because I thought the homepage for it was in the git repo and I was going to create a PR, but I realize it's not. You have a small typo in your docs.

onsole.log should be console.log

Thanks again!

Hi,

I'd like to use your switches for a webpage of mine, but I can't make it work on only a specific checkbox and not all of them.

If you have any clue, that would be a great help !

Thank you.

Sincerly

Hi,

We got crashes when you used [] in input names that was radios, for example something like this:

<input type="radio" id="account_type_change_version_0" name="account_type_change[version]" required="required" value="4">

That was because [] was used in the CSS selectors. This PR escapes all special chars with \ before, and works good for us.

Hello,

I use your excellent LCSwitch with different CSS frameworks (Bootstrap, Bulma, Foundation, Materialize, Tailwind & UIKit) in conjunction with my PHP Form Builder.

Some frameworks are wrapping the checkbox/radio inputs into their label (label[for="inputname"]) The consequence is that when we switch on/off, the switch toggles twice consecutively: 1 time triggered by the switch click, the other triggered at the same time by the label click event, which toggles the checkbox/radio, which itself triggers the el.change event

So if the switch was Off, it goes On then Off again.

I just added preventDefault(); on the parent label, it solves the problem in all situations.

Js Code event listener for lcs_off : document.querySelectorAll('input[type=checkbox]').forEach(function(el) { // triggered each time input is uncheked el.addEventListener('lcs_off', function() { var styleElem = document.head.appendChild(document.createElement("style")); styleElem.innerHTML = '.lcs_cursor: after { content: "\00D7" }'; }); });

       Html code for lcs switch:
       `<form><input type="checkbox" class="status" checked name="sample" value="1" /></form>`
       
       Switch Initialization:
       `lc_switch('.status', {
                // (string) "checked" status label text
                on_txt: 'Active',
                // (string) "not checked" status label text
                off_txt: 'Inactive',
            });`
            
            But the event listener for lsc switch off is not initiated on unchecked event.

That way code that listens on document does not need to be changed after converting a checkbox to a switch.

jQuery example: $(document).on("change lcs-statuschange", 'input' ...

does not trigger (except when clicking on the <label for="input_id">, because browser does that).