javascript - If statement only works on the first instance -

i have if statement similar fiddle here:

http://jsfiddle.net/fz4wf/43/

what i'm wanting know is, how display alert() once divs .ccn class have value on 1000, not first instance. have tried each() function i'm not sure how use it.

$(".ccn").keyup(function() {    if ($(".ccn").val() >= 1000)      alert('test');  });

<div class="cardnumber">    <input type="text" value="" maxlength="4" name="ccn" class="ccn">    <input type="text" value="" maxlength="4" name="ccn" class="ccn">    <input type="text" value="" maxlength="4" name="ccn" class="ccn">    <input type="text" value="" maxlength="4" name="ccn" class="ccn">  </div>    <ul>    <li class="checknumber">card number</li>  </ul>

try following codes:

 $('.cnn').on('keyup', function() {     flag = true;     $.each($('.cnn'), function(index, input) {         if (parseint($(input).val()) <= 1000){             flag = false         }     })      if(flag) {         alert();     } }) 

first, need add event listener on input elements. keyup, keydown, change, input events fired when user type in inputs.

then, when user type in input can validate each input 1 one see if of them satisfied condition(>1000). although not validate value every time user types. might need throttle function can check values every duration time.