Master switch to control all child switches

Question

I am trying to create a single mast switch that controls all the flags of the state child switch

Code

$(function() {
    // Initialize multiple switches
    if (Array.prototype.forEach) {
        var elems = Array.prototype.slice.call(document.querySelectorAll('.switches'));
        elems.forEach(function(html) {
            var switcherys = new Switchery(html);
        });
    }
    else {
        var elems = document.querySelectorAll('.switches');
        for (var i = 0; i < elems.length; i++) {
            var switcherys = new Switchery(elems[i]);
        }
    }
});
//Master Switch 
var MasterCheckbox = document.querySelector('.special');
//Master Switch Change State Check
MasterCheckbox.onchange = function () {
    if (MasterCheckbox.checked) {
        //Change all child switchery checkboxes state
        var special = document.querySelector('.chkChange');
        // $(special).attr("checked", true);
        special.checked = true;
        if (typeof Event === 'function' || !document.fireEvent) {
            var event = document.createEvent('HTMLEvents');
            event.initEvent('change', true, true);
            special.dispatchEvent(event);
        } else {
            special.fireEvent('onchange');
        }
    } else {
        var special = document.querySelector('.chkChange');
        //$(special).attr("checked", false);
        special.checked = false;
        if (typeof Event === 'function' || !document.fireEvent) {
            var event = document.createEvent('HTMLEvents');
            event.initEvent('change', true, true);
            special.dispatchEvent(event);
        } else {
            special.fireEvent('onchange');
        }
    }

};

<link rel="stylesheet" href="http://abpetkov.imtqy.com/switchery/dist/switchery.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://abpetkov.imtqy.com/switchery/dist/switchery.min.js"></script>
<table>
    <tr>
        <td>Master Switch</td>
        <td>
            <input type="checkbox" class="switches special" />
        </td>
    </tr>
    <tr>
        <td>Child Switch</td>
        <td>
            <input type="checkbox" class="switches chkChange" />
        </td>
    </tr>
    <tr>
        <td>Child Switch</td>
        <td>
            <input type="checkbox" class="switches chkChange" />
        </td>
    </tr>
    <tr>
        <td>Child Switch</td>
        <td>
            <input type="checkbox" class="switches chkChange" />
        </td>
    </tr>
</table>

Run code

• One Master switchery checkbox to control all child switches.
• If one child switch device of the state switch of the enablemain switch switches to enable, if disabled, otherwise remainsdisable

The problem is that it was not possible to change the state of all child switches, but only one, you can check the code fragment

Plugin site

Github

Working script example

Answer 1

EDIT:: !!!

var animating = false;
var masteranimate = false;

$(function() {
        // Initialize multiple switches
        if (Array.prototype.forEach) {
            var elems = Array.prototype.slice.call(document.querySelectorAll('.switches'));
            elems.forEach(function(html) {
                var switcherys = new Switchery(html);
            });
        }
        else {
            var elems = document.querySelectorAll('.switches');
            for (var i = 0; i < elems.length; i++) {
                var switcherys = new Switchery(elems[i]);
            }
        }

       $('input.special').change( function(e){
            masteranimate = true;
            if (!animating){
                var masterStatus = $(this).prop('checked');
                $('input.chkChange').each(function(index){
                    var switchStatus = $('input.chkChange')[index].checked;
                    if(switchStatus != masterStatus){
                         $(this).trigger('click');
                    }
                });
            }
            masteranimate = false;
       });
       $('input.chkChange').change(function(e){
           animating = true;
           if ( !masteranimate ){
               if( !$('input.special').prop('checked') ){
                   $('input.special').trigger('click');
               }
               var goinoff = true;
               $('input.chkChange').each(function(index){
                    if( $('input.chkChange')[index].checked ){
                        goinoff = false;
                    }
               });
               if(goinoff){
                  $('input.special').trigger('click');
               }
           }
           animating = false;

       });

});

JSfiddle

. , , . , - .