如何檢查是否選擇任一框或文本輸入是空的jQuery

Question

我有2個選擇框和文本輸入的表單。在更改這3個元素中的任何一個時，我想運行檢查以查看是否有任何元素爲空（無值），然後更改變量。這是我迄今爲止嘗試：

var emptyFields = true; 
 

 
var inputs = $('input[type="text"], select').on('keyup change', function() { 
 

 
    inputs.each(function() { 
 
    var elm = $(this), 
 
    val = elm.val(); 
 

 
    if ((val != '0' && elm.is('select')) || (val != '' && elm.is('input'))) { 
 
     emptyFields = false; 
 
     return false; 
 
    } 
 
    }); 
 

 
    $('.info span').text(emptyFields); 
 
});

.info { 
 
margin-top:20px; 
 
} 
 
span { 
 
font-weight:bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
<option selected disabled>SELECT AN OPTION</option> 
 
<option>One</option> 
 
<option>Two</option> 
 
<option>Three</option> 
 
</select> 
 

 
<select> 
 
<option selected disabled>SELECT AN OPTION</option> 
 
<option>Four</option> 
 
<option>Five</option> 
 
<option>Six</option> 
 
</select> 
 

 
<input type="text" /> 
 

 
<div class="info">Empty fields? <span></span></div>

我現在遇到的問題是，該變量轉變爲false甚至在所有3個元素有一個值。如果你正在完成的元素從左至右，直到你在每個select箱中進行選擇後輸入的字符到text input變量不應返回false。

Answer 1

第一個問題：一旦您在檢查期間將變量設置爲false，您在將來的檢查中絕不會將其更改回true。你應該使用一個本地變量，每次調用該函數時都要初始化該變量。

問題二：你有你的支票倒退。既然你想顯示true如果字段的任何都是空的，你需要將變量初始化爲false，然後將其設置爲true當你找到一個空場。

var inputs = $('input[type="text"], select').on('keyup change', function() { 
 
    var emptyFields = false; 
 
    inputs.each(function() { 
 
    var elm = $(this), 
 
    val = elm.val(); 
 

 
    if ((val == '0' && elm.is('select')) || (val == '' && elm.is('input'))) { 
 
     emptyFields = true; 
 
     return false; 
 
    } 
 
    }); 
 

 
    $('.info span').text(emptyFields); 
 
});

.info { 
 
margin-top:20px; 
 
} 
 
span { 
 
font-weight:bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
<option selected disabled>SELECT AN OPTION</option> 
 
<option>One</option> 
 
<option>Two</option> 
 
<option>Three</option> 
 
</select> 
 

 
<select> 
 
<option selected disabled>SELECT AN OPTION</option> 
 
<option>Four</option> 
 
<option>Five</option> 
 
<option>Six</option> 
 
</select> 
 

 
<input type="text" /> 
 

 
<div class="info">Empty fields? <span></span></div>