使用jquery计算带有变化值的输入

时间:2016-05-06 10:40:30

标签: jquery

为什么这不起作用? 它告诉我有1个输入,加载值,这是正确的。 但是如果我添加或删除一个值,它仍然表示我有1个输入值。

<head>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function(){

alert($('#myForm input[type=text][value!=""]').length);

$('#myForm input[type=text]').change(function(){
    alert($('#myForm input[type=text][value!=""]').length);
})

});
</script>
</head>

<body>
<div id="myForm">
   <input type="text" value="foo" name="f1">
   <input type="text" value="" name="f2">
</div>
</body>

FIDDLE

1 个答案:

答案 0 :(得分:2)

您正在选择属性value等于''的元素(空字符串),属性值不会更改它只是更新它的dom对象的value属性。因此,请使用 filter() 根据更新后的值进行过滤

<head>
  <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
  </script>
  <script>
    $(document).ready(function() {

      alert($('#myForm input[type=text][value!=""]').length);

      $('#myForm input[type=text]').change(function() {
        alert($('#myForm input[type=text]').filter(function() {
          return this.value == '';
        }).length);
      })

    });
  </script>
</head>

<body>
  <div id="myForm">
    <input type="text" value="foo" name="f1">
    <input type="text" value="" name="f1">
  </div>
</body>