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

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

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

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

4 个答案: