时间戳

首页 > 解决方案 > 当数组的所有项目都为真时，javascript每个函数都返回假

javascript - 当数组的所有项目都为真时，javascript每个函数都返回假

问题描述

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

// 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);
}

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

标签： javascriptjquery

解决方案

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

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()">

推荐阅读