我有很多使用相同类名的元素。现在我需要计算所选项目的数量。
例如像这样:(但是这个例子不能正常工作)
$("#btn").click(function(){
if($(".necessarily").val() == ''){
$(".necessarily").css('border','1px solid red');
}
// also I want the number of input.necessarily which are empty
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<form name="frm" action="#">
<input name="first-name" class="necessarily" type="text" /><br><br>
<input name="last-name" class="necessarily" type="text" /><br><br>
<input name="email" class="necessarily" type="email" /><br><br>
<input name="password" class="necessarily" type="password" /><br><br>
<input name="address" class="anything" type="text" /><br><br>
<input name="btn" id="btn" type="submit" value="Register" />
</form>
现在我想要那些为空的输入的数量...,我该如何计算?
最佳答案
.val()
方法返回集合中第一个元素的 .value
属性。您可以使用 .filter()
方法过滤空输入并读取过滤集合的 .length
属性:
var $empty = $(".necessarily").filter(function() {
// you can use the `$.trim` method for trimming whitespaces
// return $.trim(this.value).length === 0;
return this.value.length === 0;
});
if ( $empty.length > 0 ) {
}
如果你想给空白字段添加边框,你可以声明一个 CSS 类并使用 .removeClass
和 .addClass
方法:
CSS:
.red_border {
border: 1px solid red;
}
JavaScript:
var $empty = $(".necessarily").removeClass('red_border').filter(function() {
return this.value.length === 0;
}).addClass('red_border');
关于javascript - 如何统计选中元素的个数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34239734/