jQuery多个输入和检查长度

Question

我正在尝试将4个输入字段组合成一个jQuery函数,以便它将每个输入检查为其keyup,当所有框的长度达到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