logo标签列表

如何计算所选元素的数量？

javascriptjqueryhtml
3

我有很多使用相同类名的元素。现在，我需要计算所选项目的数量。

例如，像这样：（但是这个例子不正确）

$("#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>

现在我想知道那些输入框中为空的数量..., 我该如何计算？
我猜是因为你没有循环输入。 - tonyedwardspz
@tonyedwardspz 是的，我需要一个循环来审核所有的“输入”。但实际上我的问题是另外一件事... 我想知道，如何计算所选元素的数量..？ - Shafizadeh
7个回答
5

.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');
谢谢我的伊朗朋友 ;-) ..! +1 - Shafizadeh
1
@Benjy1996 :empty 只选择没有子节点的元素。它不检查 .value 属性的长度。由于 input 是一个不能有任何子节点的 void 元素，所以该选择器总是选择它。 - Ram
3

你最好查看HTML5约束API，而不是当前所做的手动且耗时的方式。

不要给每个字段都加上一个'class'，而是使用required属性。例如：

<input name="last-name" required type="text" />

然后在您的jQuery中，您可以使用以下代码来定位空字段：

$('input:invalid').css('border', 'solid 1px red');

如果你只是想突出显示错误字段，那么你甚至不需要JavaScript。你可以通过CSS来做同样的事情：

input:invalid { border: solid 1px red; }

唯一的问题是，即使用户没有填写表单，样式也会显示出来，这几乎是不可取的。您可以通过使用JS在表单提交时记录，并且只有在此时才激活样式来解决这个问题:
JS:
$('form').on('submit', function() { $(this).addClass('show-errors'); });

CSS（层叠样式表）：
.show-errors input:invalid { border: solid 1px red; }
1
我喜欢这个解决方案，因为它可以是纯CSS...！ - Shafizadeh
1

Try this code:

$("#btn").click(function(){
     var selectedcount = $(".necessarily").length; //no. of elements with necessarily class name
     var emptyInputCount=0;
      $(".necessarily").each(function(){
      if($(this).val() == ''){
        emptyInputCount++;
      }

    });
1
您可以像以下示例一样使用filter()。
var empty_inputs = $('.necessarily').filter(function(){
    return $(this).val()=='';
});

在我的示例中，empty_inputs.length将返回3。

希望这可以帮助您。 

var empty_inputs = $('.necessarily').filter(function(){
 return $(this).val()=='';
});

console.log(empty_inputs.length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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" value="Register"/><br><br>
<input name="password" class="necessarily" type="password" /><br><br>
<input name="address" class="anything" type="text" value="Register"/><br><br>
<input name="btn" id="btn"  type="submit" value="Register" />

希望这有所帮助。
1
另一种方法 :-)。谢谢 +1 - Shafizadeh
1
你需要：
  1. 按className查询所有元素
  2. 过滤jQuery集合，只保留没有值的元素
  3. 做一些其他事情
所以，这可能会对你有所帮助： 

function CheckEmptyCtrl($) {
  'use strict';
  
  var self = this;
  
  self.target = $('.necessarily');

  self.empty = self.target.filter(function(index, item) {
    return !($(item).val().trim());
  });
  
  
  $('#result').append(self.empty.length + ' elements have no values.');
  
  console.log(self.empty.length, self.empty);

}

jQuery(document).ready(CheckEmptyCtrl);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div id="result"></div>
    <form name="frm" action="#">
        <input name="first-name" class="necessarily" type="text" value="notEmpty" /><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>

1
尝试在目标元素上使用each循环。 

$(function() {
  $("#btn").click(function() {
    var i = 0;
    $(".necessarily").each(function() {
      if ($(this).val() == "") {
        $(this).css('border', '1px solid red');
        i++;
      }
    });
    alert(i); //Number of input element with no value
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.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>

希望这能帮到你！
1
你需要循环遍历所有输入并计算其中有多少为空。在同一循环中，你还可以计算空的 .necessarily 输入的数量。
此示例将结果输出到 .result span 中。 

$("#btn").click(function() {
  var inputs = $("form input");
  var emptyNecessarilyCount = 0;
  var totalEmpty = 0

  inputs.each(function() {
    if ($(this).val() == "") {
      totalEmpty++;
      if ($(this).hasClass('necessarily')) {
        emptyNecessarilyCount++;
      }
    }
  });
  $('.result').append("Total: " + totalEmpty);
  $('.result2').append("Necessarily: " + emptyNecessarilyCount);
});
span {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="frm" action="#">
  <input name="first-name" class="necessarily" type="text" />
  <br>
  <input name="last-name" class="necessarily" type="text" />
  <br>
  <input name="email" class="necessarily" type="email" />
  <br>
  <input name="password" class="necessarily" type="password" />
  <br>
  <input name="address" class="anything" type="text" />
  <br>
  <input name="btn" id="btn" type="submit" value="Register" />

  <span class="result"></span>
  <span class="result2"></span>
</form>

几乎与@Akshey Bhat的答案重复。但无论如何，好的谢谢，+1。 - Shafizadeh
@Shafizadeh - 这会给出你输入为空的数量。还有其他你想要了解的内容吗？ - tonyedwardspz
你的解决方案很好！ - Shafizadeh
1
@Shafizadeh 更新以计算总空缺和必要输入中的空缺数量。 - tonyedwardspz
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接