如何计算页面上带有值的输入总数？

Question

我希望有一个超级简单的验证脚本，可以将表单上的总输入与表单上带有值的总输入相匹配。您能否帮助解释为什么以下方法不起作用，并提出可行的解决方案？

小提琴：http://jsfiddle.net/d7DDu/

填写一项或多项输入，然后单击“提交”。我想查看填写的输入数作为结果。到目前为止，它只显示0。

HTML：

<input type="text" name="one">
<input type="text" name="two">
<input type="text" name="three">
<textarea name="four"></textarea>
<button id="btn-submit">Submit</button>
<div id="count"></div>

JS：

$('#btn-submit').bind('click', function() {
    var filledInputs = $(':input[value]').length;
    $('#count').html(filledInputs);
});

Answer 1

[value]指的是值attribute，与值property有很大不同。

属性在您键入时更新，属性保持不变。这意味着您可以通过elem.value = elem.getAttribute("value") 来“重置”表单元素。

就个人而言，我会这样做：

var filledInputs = $(':input').filter(function() {return !!this.value;}).length;

Answer 2

试试这个：http://jsfiddle.net/justincook/d7DDu/1/

$('#btn-submit').bind('click', function() {
    var x = 0;
    $(':input').each(function(){
        if(this.value.length > 0){ x++; };
    });
    $('#count').html(x);
});