具有onclick功能的自定义复选框在实际切换复选框之前执行功能

问题：

我有一组自定义复选框，显示为滑动开/关按钮。这些按钮可切换其他元素的可见性。到目前为止，我一直使用常规复选框，带有onclick函数，该函数对所有设置执行检查，并更新元素的可见性。它运行良好，但是在制作滑动按钮并将onclick功能移动到相应的复选框标签后，我的可见性更新延迟了一次。可见性更新是在实际选中复选框之前执行的。

问题：如何更改执行顺序，以便在切换复选框后执行可见性更新？

附加信息：在我开发的早期，我使用了一个复选框onchange-listener，但它没有成功。在我的全尺寸系统中，我还实现了按钮，用于一次选中和取消选中所有复选框，并且 onchange 侦听器将遍历我的可见性更新 18 次。每个复选框一次。这花了太多时间。另外，除了避免使用等待之外，我还想避免摆脱按钮的动画。

我已经在这个jsfiddle中重现了错误：http://jsfiddle.net/9n81ff1b/24/

对于双重的javascript函数，我深表歉意。我很难让我的js在jsfiddle中工作，这是快速而肮脏的解决方案。我的实际项目中没有双重功能：

.HTML：

<div class="onoffswitch"> 
<input type="checkbox" name="categorycheckbox" value="A" class="onoffswitch-checkbox" id="c1"> 
    <label class="onoffswitch-label" for="c1" onclick="updateSection()"> 
        <div class="onoffswitch-inner"> 
            <div class="onoffswitch-active"><div class="onoffswitch-switch"></div></div> 
            <div class="onoffswitch-inactive"><div class="onoffswitch-switch"></div></div> 
        </div>                                           
    </label>    
    </div>
    <div class="onoffswitch"> 
<input type="checkbox" name="categorycheckbox"  value="B" class="onoffswitch-checkbox" id="c2"> 
    <label class="onoffswitch-label" for="c2" onclick="updateSection()"> 
        <div class="onoffswitch-inner"> 
            <div class="onoffswitch-active"><div class="onoffswitch-switch"></div></div> 
            <div class="onoffswitch-inactive"><div class="onoffswitch-switch"></div></div> 
        </div>                                           
    </label>
        </div>
<div class="onoffswitch"> 
<input type="checkbox" name="categorycheckbox" value="C" class="onoffswitch-checkbox" id="c3"> 
    <label class="onoffswitch-label" for="c3" onclick="updateSection()"> 
        <div class="onoffswitch-inner"> 
            <div class="onoffswitch-active"><div class="onoffswitch-switch"></div></div> 
            <div class="onoffswitch-inactive"><div class="onoffswitch-switch"></div></div> 
        </div>                                           
    </label>    
    </div>
    <div class="colorbox A"> 1</div> 
    <div class="colorbox B"> 2</div> 
    <div class="colorbox C"> 3</div>

JS：（无双倍函数）

$(document).ready(function(){
    updateSection();
});
function updateSection(){
    console.log("updatingSection");
    categories = [];
    $('input[name=categorycheckbox]').each(function() {
        if (this.checked) {
            categories.push(this.value);
        }
    });

    $('.colorbox').each(function(index, element) {
        var visible = true;
        var currentElement = element;
        if (!hasClassOfArray(currentElement, categories)){
            visible = false;
            };  
        $(currentElement).toggle(visible);
    });
}

function hasClassOfArray(element, classes) {
        for (var i = 0, j = classes.length; i < j; i++) {
            if (hasClass(element, classes[i])) {
                return true;
            }
        }
        return false;
    }
function hasClass(element, cls) {
        return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
    }

.CSS：

.onoffswitch {
    position: relative; width: 90px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "ON";
    padding-left: 10px;
    background-color: #34C134; color: #FFFFFF;
}
.onoffswitch-inner:after {
    content: "OFF";
    padding-right: 10px;
    background-color: #E3E3E3; color: #999999;
    text-align: right;
}
.onoffswitch-switch {
    display: block; width: 18px; margin: 6px;
    background: #FFFFFF;
    border: 2px solid #999999; border-radius: 20px;
    position: absolute; top: 0; bottom: 0; right: 56px;
    -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}
.colorbox{
    height: 64px;
    width: 64px;
}
.A{
    background: yellow;
}
.B{
    background: green;
}
.C{
    background: red;
}