检查所有输入是否为空答案

【问题标题】：Check if all inputs are empty检查所有输入是否为空
【发布时间】：2015-01-11 22:45:58
【问题描述】：

我的页面上有多个输入，当任何一个被填满时，旁边会出现一个“信息 div”；现在，如果手动清除所有输入（在 keyup 上），我需要隐藏那个“信息 div”。

如何检查（在 keyup 上）所有输入是否同时为空？

干杯

【问题讨论】：

向我们展示您是如何让 info div 出现的

标签： javascript jquery forms input onkeyup

【解决方案1】：

遍历所有输入，如果你找到一个非空的，你就知道它们并不都是空的。如果你完成你的循环却没有找到一个，那么它们都是都是空的。

function isEveryInputEmpty() {
    var allEmpty = true;

    $(':input').each(function() {
        if ($(this).val() !== '') {
            allEmpty = false;
            return false; // we've found a non-empty one, so stop iterating
        }
    });

    return allEmpty;
}

您可能希望在比较之前“修剪”输入值（如果您想将仅包含空格的输入视为空）。您可能还希望更具体地了解您正在检查的输入。

【讨论】：

您可以缩短循环并在填写输入字段后立即返回，例如if ($(this).val() !== '') { return false; }
@dsuess 已更新。谢谢。（虽然你的例子还不够：我们不能在内部函数内部return false 外部函数！我们改为设置allEmpty = false，然后返回false 告诉$.each 停止迭代。）跨度>
像魅力一样工作。谢谢！

【解决方案2】：

没有 jQuery 的简单解决方案 (ES6)

html

<div class="container">
  <input id="input1" />
  <input id="input2" />
  <input id="input3" />
</div>

document.getElementById('btnCheckEmpty').addEventListener('click', () => {
        if (isEveryInputEmpty())
            alert('empty');
        else
            alert('not empty');
});


const isEveryInputEmpty = () => {
    var inputs = document.querySelectorAll('.container input');
    
    for (const input of inputs)
        if (input.value !== '') return false;
    
    return true;
}

Online Demo

【讨论】：

有没有办法在没有 jQuery 的情况下做到这一点？
@RalphDavidAbernathy 好主意。我已经编辑了我的代码。