如何选择 type="text" 但具有特定名称的所有输入？答案

【问题标题】：How to select all inputs with type="text" but with specific names?如何选择 type="text" 但具有特定名称的所有输入？
【发布时间】：2014-10-17 15:45:01
【问题描述】：

在我的表单中，我有不同类型的输入。我现在要做的是选择所有具有特定名称的文本字段，然后检查是否都已填写。例如，我有电子邮件、用户名、机构和地址字段。

我的目标是隐藏消息 textArea 并且仅在提到的所有字段都有值时才显示它。如何绑定所有这些字段，以便在填写所有这些字段后，消息 textArea 将显示，然后如果这些字段中的任何一个被清除，则将再次隐藏？

我在想$("input[name=email], input[name=address], input[name=username], input[name=address]")，但我认为这不是有效的。

顺便说一下，消息 textArea 将根据这些字段的输入进行填充。示例：

To Whom It May Concern:

.......................Bunch of text preassigned................
................................................................

Regards,
username.val()<email.val()>
institution.val()
address.val()

目前，在我的表单中，如果用户跳过机构字段，我的 textArea 将如下所示：

To Whom It May Concern:

.......................Bunch of text preassigned................
.......................Bunch of text preassigned................

Regards,
username.val()<email.val()>

address.val()

这样，如果我隐藏 textArea 直到所有提到的字段都被填满，我会很好地预填充我的消息 textArea。

【问题讨论】：

标签： jquery jquery-selectors

【解决方案1】：

将css 类应用于所有目标文本输入

$(document).ready(function() {
  $(':text.required').on('input', function() {
    var NOTfilled = $(':text.required').filter(function() {
      return !this.value.trim();
    });
    if (NOTfilled.length) {
      $('.hidefirst').hide();
    } else {
      $('.hidefirst').show();
    }
  });
});

.hidefirst {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" name="field1" class="required" />
  <input type="text" name="field2" class="required" />
  <input type="text" name="field3" class="required" />
  <input type="text" name="field4" class="required" />
  <input type="text" name="field5" class="required" />
  <input type="text" name="field6" class="required" />
  <textarea class="hidefirst" name="info">Hidden Info</textarea>
</form>

【讨论】：

如何测试空格？我尝试if ($.trim(NOTfilled.val()) === "") {$('.hidefirst').hide();} 来检查如果用户只提供一个空格，textarea 是否会保持隐藏状态。

【解决方案2】：

可以这样做：

HTML：

<form id="theForm">
    <input type="email" name="example"/>
    <input type="text" name="example"/>
</form>

<textarea id="txtArea">...</textarea>

CSS：

#txtArea {
    display:none;
}

jQuery：

// Whenever an input with the name example is modified
$('input[name=example]').keyup(function(){
    // Check if any input in the form with the name example is empty
    var emptyInput = $("#theForm").find('input[name=example]').filter(function(){
        return this.value === "";
    });
    // If one or more inputs named example are empty, hide the textarea, else show it.
    emptyInput.length > 0 ? $("#txtArea").hide() : $("#txtArea").show();
});

jsFiddle here

【讨论】：