Question

我有一个带有“全选”复选框的表格。当我填充此表时，将检查先前选择的所有项目。目前，即使未检查所有项目，也会返回“全选”复选框。我正在尝试创建一个迭代每个复选框的函数，如果全部都被选中，那么它将自动切换全选复选框。如果不是所有项目都被选中，则逻辑相同 - 将不会选中全选复选框。

这是我到目前为止的代码：

function unclickSelectAll(parent) {
    var $checkboxes = parent.find('input[type="checkbox"]');
    var $selectAllCheckbox =  $checkboxes.filter('.vendor');
    var $invoiceCheckBoxes = $checkboxes.filter('.invoice');
    $invoiceCheckBoxes.each(function(i, c) {
        var checkbox = $(this);
        if (checkbox[i].checked) {
            $selectAllCheckbox.prop('checked', true);
        } else { 
        $selectAllCheckbox.prop('checked', false);
     }
    });
};

目前发生的事情是它会遍历第一个复选框，如果选中它，它会将select all复选框的checked属性更改为true。然后通过下一个循环，我得到一个错误，它无法找到checkbox [i]的'checked'属性;

Answer 1

在测试每个复选框后，您将切换select-all复选框的状态，因此最终状态将基于最后一个复选框。您需要测试是否选中了所有复选框。您可以通过简单地计算复选框的数量和复选的复选框的数量来完成此操作;如果计数相同，则全部检查。

if (parent.find(':checkbox').length == parent.find(':checkbox:checked').length) {
    $selectallCheckbox.prop('checked', true);
} else {
    $selectallCheckbox.prop('checked', false);
}

Answer 2

你可以做点什么

$('.invoice:checkbox').click(function () {
  unclickSelectAll();
});

function unclickSelectAll() {
  var allSelected = $('.invoice:checked:checkbox').length === $('.invoice:checkbox').length;
  $('.vendor:checkbox').prop('checked', allSelected);
}

plunker：http://plnkr.co/edit/iSrpfjd4Z7FUIhQkewcF?p=preview

迭代复选框数组以确定是否已选中

2 个答案: