如何从N个动态输入中获取值

Question

我有一个带有选项的选择，此选项具有用户要绘制的输入数量，在该用户可以在该输入中键入信息之后，最后他们必须单击按钮以显示该值，现在我正在执行此操作像这样：

var value1 = $('#Input1').val();

这里的问题是用户最多可以创建200个输入，因此，如果我继续以上述方式进行操作，则需要使用200个输入来完成，而且代码行很多，我的问题是是否退出获取N个输入值的方法，我使用for循环动态绘制了输入，因此所有输入ID都类似于Input(MyForVariable), Input1, Input2... etc ，所以也许我在考虑创建另一个循环要获得这些输入的值，这是我的代码：

 $(document).ready(function () { $('#sel').change(function () { draw(); }); $('#btn').click(function () { show(); }); }); function draw() { var selected = $('#sel').val(); var html = ""; for (i = 1; i <= selected; i++) { html += '<input type="text" id="Imput' + i + '" />'; } $('#forms').html(html); } function show() { var total = $('#sel').val(); if (total == 2) { var val1 = $('#Imput1').val(); var val2 = $('#Imput2').val(); alert(val1 + val2); } if (total == 3) { var val1 = $('#Imput1').val(); var val2 = $('#Imput2').val(); var val3 = $('#Imput3').val(); alert(val1 + val2 + val3); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="sel"> <option value="2">A</option> <option value="3">B</option> <option value="4">C</option> <option value="5">D</option> </select> <div id="forms"> </div> <button id="btn">Click</button> 

Answer 1

将所有input放入容器中，并遍历它们：

 $('#add').on('click', function () { $('<input />').appendTo('#myinputs'); }); $('#get').on('click', function () { var values = []; $('#myinputs input').each(function () { values.push(this.value); }); console.log(values); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="myinputs"> <input /> </div> <button id="add">Add another input</button> <hr /> <button id="get">Get values</button> 

Answer 2

您可以设置一些属性并获取具有该属性的所有元素：

 $(document).ready(function () { $('#sel').change(function () { draw(); }); $('#btn').click(function () { show(); }); }); function draw() { var selected = $('#sel').val(); var html = ""; for (i = 1; i <= selected; i++) { html += '<input type="text" id="Imput' + i + '" to-count />'; } $('#forms').html(html); } function show() { var total = $('#sel').val(); var sum = ""; var inputs = $('[to-count]'); console.log(inputs.length); for (let i=0; i < inputs.length ; i++){ sum += inputs[i].value; } alert(sum); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="sel"> <option value="2">A</option> <option value="3">B</option> <option value="4">C</option> <option value="5">D</option> </select> <div id="forms"> </div> <button id="btn">Click</button> 

Answer 3

您总是可以像这样循环抛出您的输入：

var myInputArray = [];

$('input[type="text"]').each(function(){
   myInputArray.push($(this).val());
}

然后，您可以通过锁定数组来获取值：

alert(myInputArray[0]) //The first value of the array => first input

Answer 4

您可以使用以下代码获取每个“选择”选项的值：

$("#sel option").each(function() {
  console.log($(this).val());
});