check all input values of same class is empty jquery

Question

Here I have many input text fields with same class like

<input type="text" class="MyClass"></input>
<input type="text" class="MyClass"></input>
<input type="text" class="MyClass"></input>

My requirement is to check wheather all input fields of this class is empty or not. I've tried this

if(!('.MyClass').val()){
alert("empty");
}

But it doesn't make any result. Can anyone help?

Answer 1

You can check

$('button').click(function() {
  var $nonempty = $('.MyClass').filter(function() {
    return this.value != ''
  });

  if ($nonempty.length == 0) {
    alert('empty')
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="MyClass" />
<input type="text" class="MyClass" />
<input type="text" class="MyClass" />
<button>test</button>

Or using a flag

$('button').click(function() {
  var flag = false;
  $('.MyClass').filter(function() {
    if (this.value != '') {
      flag = true;
      //no need to iterate further
      return false;
    }
  });

  if (!flag) {
    alert('empty')
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="MyClass" />
<input type="text" class="MyClass" />
<input type="text" class="MyClass" />
<button>test</button>

Answer 2

You can compare the length of number of input with number of empty input using :

var allemptylength=$(".MyClass").filter(function() {
    return this.value.length !== 0;
})});

if($('.MyClass').length== allemptylength.length){
  alert("all empty");
}

Working Demo

Answer 3

To make sure each classes are checked, use

$.each($('.MyClass'),function() {
   if ($(this).val().length == 0) {
    alert('empty');
   }
});