Question

我有一个包含多组复选框的表单。我在每个组中都有一个复选框，它是一个选择/取消选择全部复选框。我一直在使用以下函数来执行selectall deselectall并在每个输入父项，一个按钮上更改类。如果选择了不是checkall复选框的列表中的一个项目，则选择复选框的checkall选项并删除并添加一个类的最佳方法是什么，然后如果人选择所有复选框或checkall复选框，则反转。我一直在将$（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

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

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

Answer 2

使用此 javascript

$(document).ready(function () {
    $(".checkall").click(function () {
        $(".classofcheckbox").prop('checked', $(this).prop('checked'));
    });
});

DEMO

选中所有复选框，如果选中了一个项目则反转

2 个答案: