互斥复选框，样式为 :before 和 :after CSS

Question

老读者，第一次发帖。

我正在使用 http://proto.io/freebies/ 中设置为 ON/OFF 开关样式的复选框

这对于“复选框”适用的情况非常有效。但是，我现在遇到了一种情况，我需要类似“无线电”的功能（互斥）。

我找到了一些用于制作互斥复选框的 Jquery 解决方案，但它们不适应 Proto.io 开关的 :before 和 :after CSS 样式。

如何使 div class="checkrow" 中的样式复选框互斥？

JS 小提琴：http://jsfiddle.net/zLGnu/2/

<div class="checkrow">
<div class="w-col w-col-3">
    <div class="onoffswitch">
        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="instagram">
        <label class="onoffswitch-label" for="instagram">
            <div class="onoffswitch-inner-instagram"></div>
            <div class="onoffswitch-switch"></div>
        </label>
    </div>
</div>
<div class="w-col w-col-3">
    <div class="onoffswitch">
        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="twitter">
        <label class="onoffswitch-label" for="twitter">
            <div class="onoffswitch-inner-twitter"></div>
            <div class="onoffswitch-switch"></div>
        </label>
    </div>
</div>

Answer 1

快速修复，

$(document).ready(function () {
    $('.onoffswitch-label').click(function () {
        $(".onoffswitch-checkbox").parent().removeClass('onoffswitch-checked');
        $(this).parent().addClass('onoffswitch-checked');
    });
});

http://jsfiddle.net/zLGnu/3/

注意：更改输入中的type="radio"。