选择来自数组的类中的所有输入

Posted 2023-05-09

【中文标题】选择来自数组的类中的所有输入

【英文标题】：Select all inputs inside a class that is from an array

【发布时间】：2020-09-12 11:06:18

【问题描述】：

在我的代码中，对于每个子类，都有一个用于显示它的复选框，否则它不会显示。当检查或未选中其中一个复选框（VAR输入）时，调用此函数。将显示与复选框关联的子类。现在，我希望子类中的所有输入都是必需的。我看了一点，但找不到怎么做。

JS：

$(".displayChildBtn").change(function()
    var inputs = $("form .displayChildBtn");
    var childClasses = $("form .childClass");
    for (var i = 0; i < inputs.length; i++) 
        if (inputs[i].checked == true) 
            childClasses[i].style.display = "block";
            //need to have all inputs inside childClasses[i] required
        
        else 
            childClasses[i].style.display = "none";
        
    
)

html（此部分在表单中重复，但在 childClass 中输入不同）：

<input type="checkbox" class="displayChildBtn" name="AddSomeone"/>//when checked, shows the childClass and should place the inputs required.
<label for="AddSomeOne">Add Someone</label>
<div class="chilClass">
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname">
</div>

更清楚地说，我想要的是当复选框被选中时，它旁边的 childClass 的输入成为必需的。我不知道如何正确选择这些输入。 谢谢

【问题讨论】：

您能否向我们展示一个标记示例，以帮助我们可视化您正在使用的内容？

还提供更详细的说明，说明您在显示的代码中遇到的问题。花几分钟阅读如何创建minimal reproducible example

@Taplar 希望编辑有所帮助。如果您需要更多说明，请告诉我

childClasses.find(':input').prop('required', true)?您可以在 jQuery 网站上阅读有关 prop 的信息...

这能回答你的问题吗？ jQuery add required to input fields

【参考方案1】：

你可以这样做：

$(".displayChildBtn").on("click", function() 
  if ($(this).is(":checked")) 
    $(this).nextAll(".childClass:first").show();
    let inputs = $(this).nextAll(".childClass:first").find("input");
    inputs.each(function() 
      $(this).prop("required", true);
    );
   else 
    $(this).nextAll(".childClass:first").hide();
    let inputs = $(this).nextAll(".childClass:first").find("input");
    inputs.each(function() 
      $(this).removeAttr("required");
    );
  
);

.childClass 
   display:none;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="displayChildBtn" name="AddSomeone" />//when checked, shows the childClass and should place the inputs required.
<label for="AddSomeOne">Add Someone</label>
<div class="childClass">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</div>