檢查所有輸入是否為空

Question

我的頁面上有多個輸入，當它們被填充時，側面會出現“info div”; 現在如果所有輸入都被手動清除（在keyup上），我需要隱藏“info div”。

如何檢查（在密鑰上）所有輸入同時為空？

干杯

Answer 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;
}

您可能希望在比較之前“修剪”輸入值（如果您想將輸入中只有空格處理為空）。 您還可能希望更具體地了解您正在檢查哪些輸入。

Answer 2

簡單的解決方案（ES6）

HTML

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

JS

function areAllInputsEmpty() {
  return $(".container input").filter(function() {
    return $.trim($(this).val()).length > 0
  }).length == 0;
}

在線演示（jsFiddle）