Как подсчитать количество полей ввода пустых полей?

Question

Как подсчитать пустые поля ввода текстовых полей.

Я написали этот код, чтобы подсчет пустых полей. это отлично работает на полях с предварительно загруженным значением. но после того, как я напечатаю что-то в других текстовых полях и снова попробую функцию, он дает тот же результат «2». кажется, что функция пренебрегает значениями, добавленными после загрузки.

Как я могу улучшить это, чтобы нормально работать даже после ввода текстов в полях после загрузки html?

* Я искал в стеке и не нашел хороших ответов на этот вопрос.

$(document).on("click", ".pool", function() { 
 
      
 
     var count = $('.option[value=""]').length; 
 
     alert(count); 
 
     
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<div id="optionlist"> 
 
    
 
    <input type="text" class="option form-control" value="bla bla"> 
 
    <input type="text" class="option form-control" value=""> 
 
    <input type="text" class="option form-control" value=""> 
 
    \t \t \t \t \t \t \t 
 
</div>

Answer 1

$(document).ready(function(){ 
    $(document).on("click", ".pool", function() { 
    var count=0; 
    $(".option").each(function(){ 
     count = count+($.trim($(this).val())=="" ? 1 : 0); 
    }); 
    alert(count); 
    }); 
}); 

Fiddle

Answer 2

Попробовать -

$(document).on("click", ".pool", function() { 

    var count = 0; 
    $('.option').each(function() { 
     if ($.trim($(this).val()) == "") { 
      count++; 
     } 
    }) 
    alert(count); 

}); 

Answer 3

Вы можете использовать фильтр, который проверяет .val() для пустой строки.

$(document).on("click", ".pool", function() { 
 
      
 
     var count = $('.option:text').filter(function(input){ 
 
      return $(this).val() == ""; 
 
     }).length; 
 

 
     alert(count); 
 
     
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<div id="optionlist"> 
 
    
 
    <input type="text" class="option form-control" value="bla bla"> 
 
    <input type="text" class="option form-control" value=""> 
 
    <input type="text" class="option form-control" value=""> 
 
    <input type="button" value="Click" class="pool" /> 
 
    \t \t \t \t \t \t \t 
 
</div>