javascript - jQuery 文本框总和

Question

下面是我的 HTML

我想要一个这样的脚本 在一个文本框中，我想添加所有总金额并显示它 在另一个文本框中我想要这样的

"name": [{
  "id": 3,
  "qty": 2
}, {
  "id": 4,
  "qty": 5
}]

我更新的问题

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <input type="text" name="name">
  <input type="text" name="id">
  <input type="text" name="qty">
  <input type="text" name="amount">
</div>
<div class="main">
  <input type="text" name="name">
  <input type="text" name="id">
  <input type="text" name="qty">
  <input type="text" name="amount">
</div>
<div class="main">
  <input type="text" name="name">
  <input type="text" name="id">
  <input type="text" name="qty">
  <input type="text" name="amount">
</div>
<button>Click Me!!!</button>

我的更新代码在这个 js 核心 js 中不起作用，但工作正常

Answer 1

尝试以下方法:

$('input[name="qty"]').change(function(){
  var name = [];
  $('.main').each(function(index,item){
    var obj={};
    obj.id = $(item).find('input[name="id"]').val();
    obj.qty = $(item).find('input[name="qty"]').val();
    name.push(obj)
  });
  console.log(name);
});

input{
  width:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
    <input type="text" name="name">
    <input type="text" name="id">
    <input type="text" name="qty">
    <input type="text" name="amount">
</div>
<div class="main">
    <input type="text" name="name">
    <input type="text" name="id">
    <input type="text" name="qty">
    <input type="text" name="amount">
</div>
<div class="main">
    <input type="text" name="name">
    <input type="text" name="id">
    <input type="text" name="qty">
    <input type="text" name="amount">
</div>