主开关控制所有子开关

Question

我正在尝试创建一个控制所有子切换复选框状态的主切换复选框

代码是

$(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.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>

一个主开关复选框来控制所有子开关复选框状态
如果一个子切换复选框状态 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

那真的很抽象。似乎他们应该是一种更简单的方法，但我找不到。如果我需要解释任何事情，请告诉我。

主开关控制所有子开关

Master switchery control all child switchery

javascript

checkbox

jquery

switchery