主控切换控制所有儿童转换

Question

我正在尝试创建One Master切换复选框，该复选框控制所有子切换复选框状态

代码是

＆＃13;

＆＃13;

$(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');
        }
    }

};

＆＃13;

<link rel="stylesheet" href="http://abpetkov.github.io/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.github.io/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>

＆＃13;

＆＃13;

＆＃13;

1. 一个主控切换复选框，用于控制所有子级切换复选框状态
2. 如果一个子级切换复选框状态enable主切换复选框状态更改为enable，如果已禁用，则保持disable

问题是无法更改所有子级切换复选框的状态而只能更改一个，可以查看代码段

Plugin Site

Github

Working Fiddle Example

Answer 1

编辑:: 新代码!!!

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;

       });

});

Updated JSfiddle

那真是抽象。似乎他们应该是一个更容易的方式，但我找不到它。如果我需要解释一下，请告诉我。