检查所有输入是不是为空

Posted 2023-05-07

【中文标题】检查所有输入是不是为空

【英文标题】：Check if all inputs are empty检查所有输入是否为空

【发布时间】：2015-01-11 22:45:58

【问题描述】：

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

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

干杯

【问题讨论】：

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

【参考方案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>

JS

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 好主意。我已经编辑了我的代码。