Question

我有一个包含2个选择框和文本输入的表单。在更改这3个元素中的任何一个时，我想运行一个检查以查看是否有任何元素为空（没有值），然后更改变量。这是我到目前为止所尝试的内容：

var emptyFields = true;

var inputs = $('input[type="text"], select').on('keyup change', function() {

  inputs.each(function() {
    var elm = $(this),
    val = elm.val();

    if ((val != '0' && elm.is('select')) || (val != '' && elm.is('input'))) {
      emptyFields = false;
      return false;
    }
  });

  $('.info span').text(emptyFields);
});

.info {
margin-top:20px;
}
span {
font-weight:bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option selected disabled>SELECT AN OPTION</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>

<select>
<option selected disabled>SELECT AN OPTION</option>
<option>Four</option>
<option>Five</option>
<option>Six</option>
</select>

<input type="text" />

<div class="info">Empty fields? <span></span></div>

我现在遇到的问题是，即使在所有3个元素都有值之前，变量也会变为false。如果您从左到右填写元素，则在每个false框中进行选择后，在text input输入字符之前，该变量不应返回select。

Answer 1

第一个问题：在检查过程中将变量设置为false后，在将来的检查中永远不会将其更改回true。您应该使用局部变量，每次调用函数时都会初始化该变量。

第二个问题：你的支票倒退了。由于您希望显示true如果任何字段为空，则需要将变量初始化为false，然后在找到时将其设置为true空场。

var inputs = $('input[type="text"], select').on('keyup change', function() {
  var emptyFields = false;
  inputs.each(function() {
    var elm = $(this),
    val = elm.val();

    if ((val == '0' && elm.is('select')) || (val == '' && elm.is('input'))) {
      emptyFields = true;
      return false;
    }
  });

  $('.info span').text(emptyFields);
});

.info {
margin-top:20px;
}
span {
font-weight:bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option selected disabled>SELECT AN OPTION</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>

<select>
<option selected disabled>SELECT AN OPTION</option>
<option>Four</option>
<option>Five</option>
<option>Six</option>
</select>

<input type="text" />

<div class="info">Empty fields? <span></span></div>

如何使用jQuery检查选择框或文本输入是否为空

1 个答案: