因此，我正在尝试构建一个表单，当您单击家庭时，它将添加数字输入。根据该数字输入，它将建立更多的文本输入。例如，如果我单击家庭，然后输入4作为出现的数字输入。它将创建4个不同的文本条目，要求您输入家人的名字。所以我的问题是，您可以创建一个元素，然后将该元素的值存储在变量中以供以后使用。这是我的代码：HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<style>
</style>
</head>
<body>
<div class = "container">
<form>
<p>Is this membership for an individual or a family?</p>
<p>Individual - $60: <input type = "radio" id = "individual-selector" value = "individual" name = "type"></p>
<p>Family - $150: <input type = "radio" id = "family-individual-selector" value = "family" name = "type"></p>
<div id = "family-number"></div>
<div class = "form-start">
<p>Full Name: <input type = "text" required name = "name" placeholder = "First Last"></p>
<p>Address: <input type = "text" required name = "address" placeholder = "eg - 123 Main Street"></p>
<p>City: <input type = "text" required name = "city" placeholder = "New York"></p>
<p>State: <input type = "text" required name = "state" placeholder = "NY"></p>
<p>Zip Code: <input type = "text" required name = "zip" placeholder = "10030"></p>
<p>Phone Number: <input type="tel" id="phone" name="phone" placeholder="123-459-6780" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required></p>
<p>Email: <input type = "email" name = "email" id = "email" placeholder = "[email protected]" required></p>
</div>
<input type = "submit" value = "Purchase">
<input type = "reset">
</form>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
JS：
var family = document.querySelector("#family-individual-selector");
var individual = document.querySelector("#individual-selector");
var form = document.querySelector(".form-start");
var familyNumber = document.querySelector("#family-number");
individual.addEventListener("click",function(){
familyNumber.innerHTML = "";
})
family.addEventListener("click",function(){
familyNumber.innerHTML = "<p>Input Number Of Family Members: <input type = 'number' id = 'family-num'></p>"
var familyNum = document.querySelector("#family-num");
})
<div id="family-member"></div>
然后获得需要增加的家庭数量
// create array to store the input member var families = []; $("#family-num").on('change', function() { // reset the view and the array every change detected $("#family-member").empty(); families = []; for(let i = 1; i<=this.value; i++) { $("#family-member").append("<p>Member "+ (i) +": <input type = 'text' id = 'family-member-"+(i)+"'></p>") families.push($("#family-member-"+i)); } })使用此方法，您会将新输入追加到
#family-member
最后，您可以使用families数组，如果要获取它的值，可以这样做
var family_values = []; families.forEach(function(member) { family_values.push(member.value); });