Question

我有一个可以追加的文本框。我想获取每个文本框的值

$('#entryData').append('<div><input type="text" id="quantity"></div>');
var total = $('#quantity').val();
console.log(total);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="entryData">
  <input type="text" id="quantity">
  <input type="button" value="+">
  <input type="button" value="Total">
</div>

但是我只得到第一个文本框值，而不是其他文本框

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id='entryData' >
 <input type="text" class='quantity'>
 <input type="button" value="+" id='add'>
 <input type="button" value="Total" id='total'>
</div>

<script>
$(document).ready(function(){
$('#add').click(function(){
 $('#entryData').append('<div><input type="text" class="quantity"></div>');
});
$('#total').click(function(){
var total=0;
 $('.quantity').each(function(index,quantity){
   total=total+parseInt($(this).val());
 });
   alert(total);
});

});

</script>

我希望这就是您要尝试的事情？

Answer 2

或使其如下：

<div id='entryData' >
 <input type="number" class='quantity'>
 <input type="button" value="+" id='add'>
 <input type="button" value="Total" id='total'>
</div>

如果需要数字，请输入字段编号。

//this should come from helper method file/lib - for reusability
const sum = (accumulator, currentValue) => accumulator + currentValue;
const mapToInt = (idx,element) => { if (element.value !== "") { return parseInt(element.value, 10); } }

$(document).ready(() =>{

    $('#add').click( () => {
        $('#entryData').append('<div><input type="number" class="quantity" /></div>');
    });

    $('#total').click( () => {
        let total = $(".quantity").map(mapToInt).get().reduce(sum);
        console.log ( total );
    });
});

编辑：如果您考虑使用更实用的方法，可以重复使用sum（聚合函数）和mapToInt。

如何获取多个追加文本框的值？

2 个答案: