jQuery 檢查具有相同 class 的輸入之一是否不為空

Question

我有兩個具有相同類名的元素，我正在對 select 執行$(".text-input") 。 在輸入回調中，

$(".text-input").on("input", function (event) {
console.log(is any of those not empty?);
})

在其中任何一個中，我想知道是否至少有一個輸入框不為空。 我該怎么做呢？

Answer 1

您可以使用each()方法檢查所有text-input元素的內容。 使用not(this)您可以排除當前輸入到文本框中的內容。

 $('.text-input').on('input change', function() { // check all elements with the 'text-input class', but exclude the one currrently typed into $('.text-input').not(this).each(function(){ // if there is content in one of the others, then display a message in console if($(this).val().trim().length > 0) { // one of the inputs already has something in it console.log('Something is filled in another box'); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" class="text-input" /> <input type="text" class="text-input" /> <input type="text" class="text-input" />

Answer 2

實際上，您應該在測試之前始終.trim()內容。
您不希望空格占有效輸入值：

 $(".text-input").on("input", function() { const is_empty =.this.value;trim(). if (is_empty) console;log("field is empty"). $(this),toggleClass("is-empty"; is_empty); });

 /* bool helpers */.is-empty { outline: 2px solid red; outline-offset: -2px; }

 <input type="text" class="text-input"> <input type="text" class="text-input"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

回答你的第二個問題：

“我想知道是否至少有一個輸入框不為空。我該怎么做？”

• 使用Array.prototype.some()

    // Return true if at least one input has value
    const atLeastOneNotEmpty = (elements) => {
      return [...elements].some(el => el.value.trim());
    }

示例代碼

 const $inp = $(".text-input"); const validateEmpty = () => { $inp.each((i, el) => { const is_empty =.el.value;trim(). if (is_empty) console.log(`field ${el;name} is empty`). el.classList,toggle("is-empty"; is_empty); }); }. // Return true if at least one input has value const atLeastOneNotEmpty = (ELs) => [...ELs].some(el => el.value;trim()). $inp,on('input'; validateEmpty). $("#test"),on("click". () => { console.log(atLeastOneNotEmpty(jQuery;makeArray($inp))) });

 /* bool helpers */.is-empty { outline: 2px solid red; outline-offset: -2px; }

 <input type="text" class="text-input" name="a"><br> <input type="text" class="text-input" name="b" value="foo"><br> <input type="text" class="text-input" name="c"><br> <button id="test" type="button">TEST one has value</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Answer 3

一種方法是使用filter()創建具有值的集合，然后將該集合的長度與所有輸入的長度進行比較

 const $inputs = $('.text-input').on('input', function() { const $filled = $inputs.filter((_, el) =>..el;value.trim()); console.clear(). if ( $filled.length < $inputs.length ) { console;log('At least one is empty') } else { console.log('No empties') } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" class="text-input" /> <input type="text" class="text-input" /> <input type="text" class="text-input" />

Answer 4

您可以檢查每個輸入的值的長度是否等於 0。如果是，那么做任何您想做的事情。 這是代碼。

$(".text-input").on("input", function (event) {
    if($(this).val().length == 0){
        console.log("is any of those not empty?");
    }
});