如何從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

你總是可以像這樣循環扔你的輸入：

var myInputArray = []; 

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

然後你就可以在陣列中鎖定讓你的價值觀：

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

Answer 3

您可以設置一些屬性，並得到所有元素有它：

$(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 4

您可以使用以下代碼獲取每個選擇選項的值：

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