jQuery检测多输入框值问题：仅识别首个输入框的解决方案求助

嘿，你遇到的问题很常见——$(".inputs").val()这个方法只会返回第一个匹配到的输入框的值，所以不管后面的输入框有没有内容，它都只看第一个。要实现检查所有输入框的需求，我们需要遍历每个输入框，逐一验证它们的内容。

下面给你两种可行的解决方案：

方法1：用.each()遍历验证 #

我们可以用.each()方法循环每个.inputs元素，标记是否存在未填写的输入框：

$("button").on("click", function () {
  // 默认假设所有输入框都已填写
  let allInputsFilled = true;
  
  $(".inputs").each(function() {
    // 用trim()去掉前后空格，避免用户只输入空格的情况
    const inputValue = $(this).val().trim();
    if (!inputValue) {
      allInputsFilled = false;
      return false; // 找到空输入框后停止遍历，提升效率
    }
  });
  
  // 根据结果设置背景色
  $("body").css("background-color", allInputsFilled ? "yellow" : "red");
});

方法2：用.filter()筛选空输入框（更简洁） #

另一种更简洁的方式是用.filter()筛选出所有未填写的输入框，再判断筛选结果的长度：

$("button").on("click", function () {
  // 筛选出值为空（去掉空格后）的输入框
  const emptyInputFields = $(".inputs").filter(function() {
    return !$(this).val().trim();
  });
  
  // 如果没有空输入框（长度为0），则设为黄色，否则红色
  $("body").css("background-color", emptyInputFields.length === 0 ? "yellow" : "red");
});

额外小提示 #

你的HTML里form的class写了.form，这是错误的写法哦，class名不需要带点，应该改成：

<form class="form" action="">
  <input type="text" class="inputs"><br>
  <input type="text" class="inputs"><br>
</form>
<button>Check</button>

这样修改后，点击Check按钮就会检查所有输入框啦！

内容的提问来源于stack exchange，提问作者loripagojo