[英]Check if all inputs are empty (have no value)
我只是想快速拼湊一些東西,檢查我的表單中的任何輸入是否為空。
我在嘗試這個:
var isEmpty = true;
$('input').each(function(){
if($(this).val() === ""){
isEmpty = false;
}
});
alert(isEmpty);
但它不斷提醒真實的 。
如果我這樣做:
$('input').each(function(){
alert($(this).val();
});
它會警告我擁有的每個輸入字段......
如果我有一個空輸入,為什么它不返回false?
這是一個小片段,用於檢查所有文本 inputs
是否為空:
var isEmpty = $("input[type='text']").filter(function () {
return this.value.trim();
}).length === 0;
console.log( isEmpty ); // boolean true/false
PS:對於checkbox
和radio
,游戲更簡單:
var isUnchecked = $("input[type='checkbox']:checked").length === 0;
var isRadioUnchecked = $("input[type='radio']:checked").length === 0;
:blank
自定義選擇器(適用於任何元素) jQuery.extend(jQuery.expr[':'], { blank: function(e,i,m) { if(/input|textarea/i.test(e.tagName)) { if(/checkbox|radio/i.test(e.type)){ return !e.checked; }else{ return !e.value.length; } }else{ return !e.innerHTML.trim(); } } }); $("div:blank").css({outline:"2px solid red"}); $("input:blank").css({outline:"2px solid red"}); $("textarea:blank").css({outline:"2px solid red"}); $("div:not(:blank)").css({outline:"2px solid green"}); // how cool is that? Using :not
*{margin:5px;padding:2px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div></div> <div>Example using :not(:blank) selectors</div> <input type="text" value="abc"> <input type="text" value=""> <input type="checkbox"> <input type="checkbox" checked> <input type="radio" checked> <input type="radio"> <textarea></textarea> <textarea>abc</textarea>
在像<div>
或<p>
等標准元素上, :blank
行為與jQuery不同:empty
選擇器會引起注意空格和換行:
<p>
</p>
並看到結果:
$("p:blank").length // 1 (found one blank paragraph)
$("p:empty").length // 0 there's no empty paragraph (since the newlines/spaces)
回到你的問題:)
由於您循環所有元素 ,因此目前只將isEmpty
的值設置為循環中的最后一個元素 - 值。
你可以將你的布爾標志斷言為if
:
var isEmpty = false; // start with a falsy presumption
$('input').each(function(){
// as long as `isEmpty` is `false`
if(isEmpty===false && $.trim( this.value ) === "") {
isEmpty = true;
}
});
另外,檢查空虛做=== ""
更有意義返回true
否則反過來就是顛倒你的否定
var isEmpty = true; // start with a truthy presumption
$('input').each(function(){
if(isEmpty && $.trim( this.value )){
isEmpty = false;
}
});
這是一個實例:
var isEmpty = true; // start with a truthy presumption $('input').each(function(){ if(isEmpty && $.trim( this.value )){ isEmpty = false; } }); alert(isEmpty); // false
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" value=""> <input type="text" value="something"> <input type="text" value="">
alert
在循環之外,因此它僅警告最終值。希望下面的代碼很有用
HTML
<input type="text" id=" " value="rdrdr"/>
<input type="text" id=" " value=" "/>
<input type="text" id=" " value="xdxd"/>
<input type="text" id=" " value=" "/>
JS
$('input').each(function(){
var isEmpty = true;
if($.trim($(this).val()) == ""){
isEmpty = false;
}
console.log(isEmpty)
});
在您的代碼中,您正在檢查:
if($(this) === "")
但$(this)
是一個jQuery對象,它永遠不會與空字符串相同。 也許你打算寫這個?
if ($(this).val() === "")
您需要檢查每個輸入的val(),所以請記住獲取要比較的值:
if ( $(this).val() === "" )
嘗試首先初始化變量,不包含任何值。 然后在某個范圍內放置一個值並調用它。
var isEmpty;
$('input').each(function(){
if($(this) === ""){
var isEmpty = false;
return isEmpty;
alert(isEmpty);
} else {
var isEmpty = true;
return isEmpty;
alert(isEmpty);
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.