如何选择type =“text”但具有特定名称的所有输入？(How to select all inputs with type=“text” but with specific names?)

如何选择type =“text”但具有特定名称的所有输入？(How to select all inputs with type=“text” but with specific names?)

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

我的目标是隐藏消息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。

In my form, I have different types of inputs. What I want to do now is to select all text fields with specific names and then check if all were filled. For example, I have email, user name, institution and address field.

My goal is to hide a message textArea and will only show it if all of the fields mentioned have values. How can I bind all these fields such that when all these fields were filled, message textArea will show and then will hide again if any of these fields were cleared?

I'm thinking $("input[name=email], input[name=address], input[name=username], input[name=address]") and I don't think this is efficient.

The message textArea by the way will be populated based on the inputs from these fields. Example:

To Whom It May Concern: .......................Bunch of text preassigned................ ................................................................ Regards, username.val()<email.val()> institution.val() address.val()

Currently, in my form, if the user skipped the institution field, my textArea would look like this:

To Whom It May Concern: .......................Bunch of text preassigned................ .......................Bunch of text preassigned................ Regards, username.val()<email.val()> address.val()

That way if I hide the textArea until all mentioned fields were filled, I will have my message textArea prefilled nicely.

最满意答案

将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> 
  
 
Apply a css class to all the target text inputs
 
 
 
  
  
$(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>