当数组的所有项都为 true 时，javascript 每个函数都返回 false

Question

我正在尝试使用每个函数检查 javascript 数组的所有项目是否均为 true:

// Iterate over a column of checkboxes
function GetListOfChecks()
{
    var lstChecks = [];
    $('.chkbxq').each(function () {
        lstChecks.push($(this).attr('checked') === 'checked' ? true : false);
    });

    return lstChecks;
}

// Update header checkbox (checked or unchecked)
function UpdateCheckBoxHdr()
{
    var grid = $('#MyGrid').data('tGrid');

    var lstChecks = GetListOfChecks();

    var checked = lstChecks.every(function (v) { v === true; });
    $('.chkbx').attr('checked', checked);
}

然后，如果所有项目均为 true，我会将标题复选框列选中。否则，我将其设置为未选中。 我遇到的问题如下: lstChecks 中的所有项目都是 true，但每个函数都返回 false。为什么？它应该返回 true。使用 Chrome 检查器，我看到下面的 lstChecks = [true, true, true, true] 值，但它返回 false。

Answer 1

您应该使用 .prop 而不是 .attr - .attr 只会为您提供复选框的状态标记。您还需要从 .every 回调返回，并简单地检查 .prop('checked') (不要使用 === )。在最后设置 chkbx 时，您还应该使用 .prop:

function GetListOfChecks()
{
    var lstChecks = [];
    $('.chkbxq').each(function () {
        lstChecks.push($(this).prop('checked'));
    });

    return lstChecks;
}

// Update header checkbox (checked or unchecked)
function UpdateCheckBoxHdr()
{
    var grid = $('#MyGrid').data('tGrid');

    var lstChecks = GetListOfChecks();
    var checked = lstChecks.every(v => v);
    $('.chkbx').prop('checked', checked);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="chkbx">
<input type="checkbox" class="chkbxq" onchange="UpdateCheckBoxHdr()">
<input type="checkbox" class="chkbxq" onchange="UpdateCheckBoxHdr()">

您也可以非常轻松地实现如此琐碎的事情，而无需像 jQuery 这样的大型库:

// Update header checkbox (checked or unchecked)
function UpdateCheckBoxHdr() {
  if ([...document.querySelectorAll('.chkbxq')].every(checkbox => checkbox.checked)) {
    document.querySelector('.chkbx').checked = true;
  }
}

<input type="checkbox" class="chkbx">
<input type="checkbox" class="chkbxq" onchange="UpdateCheckBoxHdr()">
<input type="checkbox" class="chkbxq" onchange="UpdateCheckBoxHdr()">