checking all values if empty or filled using jquery

Question

how to check if all values were empty using jquery.

<input type='text' class='req-in' name='fname'>
<input type='text' class='req-in' name='lname'>
<input type='text' class='req-in' name='nam2'>
<input type='text' class='req-in' name='nam4'>

I tried this but it only works on the first input

if($('.req-in')).val() == ''{
   // code here
   $(this).after('<p>empty!</p>');
}

Answer 1

You need to iterate over the elements and check the value:

Example Here

$('.req-in').each(function () {
    if (!this.value) {
        $(this).after('<p>empty!</p>');
    }
});

---

You could also use the .filter() method :

Updated Example

$('input.req-in').filter(function () {
    return !this.value;
}).after('<p>empty!</p>');

Answer 2

You should have use .each() as following code:

$('.req-in').each(function(){
 if( $(this).val()==""){
    $(this).after('<p>empty!</p>'); 
 }
});