javascript - 选中所有复选框，如果选中一项则反转

Question

我有一个包含多组复选框的表单。我在每一组中有一个复选框，它是全选/取消全选复选框。我一直在使用以下函数来制定全选取消全选并更改每个输入父项(一个按钮)上的类。如果选择了列表中非复选框的一项，则删除复选框的全选选择并删除和添加类的最佳方法是什么，然后如果用户选择所有复选框或全选复选框，则最好的方法是什么。我一直将 $(this) 保存为变量。这会成为一个问题吗？

.html

<div class="panel-body">
    <div class="col-xs-6 col-sm-4 margin-bottom-sm">
        <label for="checkall4" class="btn btn-custom btn-sm btn-block">
            <input type="checkbox" name="checkall4" id="checkall4" data-mini="true" class="checkall" checked>
                Select/Deselect All</label>
    </div>
    <div class="col-xs-6 col-sm-4 margin-bottom-sm">
        <label for="within1" class="btn btn-custom btn-sm btn-block">
            <input type="checkbox" name="within1" value="1" checked="checked" id="within1"/>
                Within 1km</label>
    </div>
    <div class="col-xs-6 col-sm-4 margin-bottom-sm">
        <label for="within2" class="btn btn-custom btn-sm btn-block">
            <input type="checkbox" name="within2" value="2" checked="checked" id="within2"/>
                Within 2km</label>
    </div>
</div>

.js

$('.checkall').change(function() {
    var $this = $(this);
    var $allBoxes = $this.closest('.panel-body').find(':checkbox');
    if ($this.prop('checked')) {
        $allBoxes.prop('checked', true);
        $allBoxes.parent().removeClass('btn-default').addClass('btn-custom');
    } else {
        $allBoxes.prop('checked', false);
        $allBoxes.parent().removeClass('btn-custom').addClass('btn-default');
    }
});                             

Answer 1

为处理程序非复选框添加另一个处理程序

$('.panel-body input[type="checkbox"]:not(.checkall)').change(function () {
    var $this = $(this),
        $body = $this.closest('.panel-body');
    var $allBoxes = $body.find(':checkbox:not(.checkall)');
    $body.find('.checkall').prop('checked', $allBoxes.not(':checked').length == 0);
})

演示:Fiddle