jQuery多个输入和检查长度

Question

我试图将4个输入字段组合成一个jQuery函数，以便它检查每个输入作为其keyup'd，当所有框达到4的长度，然后列表项更改为确认各个领域都充满

HTML

<div class="cardNumber"> 
    <input type="text" value="" maxlength="4" name="ccn1" id="ccn1"> 
    <input type="text" value="" maxlength="4" name="ccn2" id="ccn2"> 
    <input type="text" value="" maxlength="4" name="ccn3" id="ccn3"> 
    <input type="text" value="" maxlength="4" name="ccn4" id="ccn4"> 
</div> 

<ul> 
    <li class="checkNumber">Card Number</li> 
</ul> 

jQuery的

$(".cardNumber input[name=ccn1], .cardNumber input[name=ccn2], .cardNumber input[name=ccn3], .cardNumber input[name=ccn4]").keyup(function() { 
    $(".cardNumber input[name=ccn1], .cardNumber input[name=ccn2], .cardNumber input[name=ccn3], .cardNumber input[name=ccn4]").each(function() { 
     if ($(".cardNumber input[name=ccn1], .cardNumber input[name=ccn2], .cardNumber input[name=ccn3], .cardNumber input[name=ccn4]").length >= '4') { 
      $("li.checkNumber").addClass("checked"); 
     } 
    }); 
}); 

演示：http://jsfiddle.net/fz4wF/

Answer 1

$(':input[name^=ccn]').keyup(function() { 
    var check = $(':input[name^=ccn]').filter(function() { 
     return $.trim(this.value).length < 4; 
    }).length === 0; 

    $("li.checkNumber").toggleClass("checked",check); 
}); 

DEMO

Answer 2

事情是这样的：

http://jsfiddle.net/fz4wF/19/

$(".cardNumber input").keyup(function(){  
    var allfilled = true; 
    $(".cardNumber input").each(function() { 
     if($(this).val().length < 4) { 
      allfilled =false; 
      return false; 
     } 
    }); 

    $("li.checkNumber").toggleClass("checked",allfilled);  
});​ 

Answer 3

我相信this是你需要的。

Answer 4

我认为最简单的方法是：http://jsfiddle.net/fz4wF/28/ 不是最好的。