关于jQuery的更改不适用于可读取输入字段

Question

我的形式有一些字段，如下所示：

$(document).on("change", ".qty2", function() {
  var sum1 = 0;
  $(".qty2").each(function() {
    sum1 += +$(this).val();
  });
  $("#subtotal").val(sum1);
});

$(document).on("change", "#subtotal", function() {

  var subt = $("#subtotal").val();

  var tot_price = (subt * 9 / 100);
  var divobj = document.getElementById('cgst');
  var divobj1 = document.getElementById('sgst');
  divobj.value = tot_price;
  divobj1.value = tot_price;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control price qty2" id="client_type" required name="price[]">
<input type="text" class="form-control price qty2" id="client_type" required name="price[]">
<input type="text" class="form-control price qty2" id="client_type" required name="price[]">
<input type="text" class="form-control qty1" id="subtotal" required name="subtotal" readonly>
<input type="text" class="form-control qty1" id="cgst" required name="cgst" readonly>
<input type="text" class="form-control qty1" id="sgst" required name="sgst" readonly>

除了第一个输入字段的“价格”之外，所有其他3个都被阅读，当用户进入价格字段时，该值被带到小计，我需要从那里计算SGST和CGST并将其显示在各自的字段中，但是，在我的代码中只有在小计显示器正常工作之前，任何人都可以告诉我如何解决此问题，谢谢

Answer 1

这是使用html的脚本重写

，如果您有一组字段，请将每个集合包装在DIV中并使用.closest（“ Div”）。查找（“。其他Field”）使此工作在例如购物清单中

const $qty = $(".qty2").on("input", () => { // cache the fields
  let total = $qty
    .map((i, fld) => +fld.value)
    .get()
    .reduce((a, b) => a + b);
  let tot_price = (total * 9 / 100).toFixed(2);
  $("#subtotal").val(total);
  $('#cgst').val(tot_price);
  $('#sgst').val(tot_price);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control price qty2" required name="price[]">
<input type="text" class="form-control price qty2" required name="price[]">
<input type="text" class="form-control price qty2" required name="price[]">
<input type="text" class="form-control qty1" id="subtotal" name="subtotal" readonly>
<input type="text" class="form-control qty1" id="cgst" name="cgst" readonly>
<input type="text" class="form-control qty1" id="sgst" name="sgst" readonly>

Answer 2

只需在代码中的#subtototal行上评论变更事件，就可以了。

$(document).on("change", ".qty2", function() {
  var sum1 = 0;
  $(".qty2").each(function() {
    sum1 += +$(this).val();
  });
  $("#subtotal").val(sum1);
// });

// $(document).on("change", "#subtotal", function() {

  var subt = $("#subtotal").val();

  var tot_price = (subt * 9 / 100);
  var divobj = document.getElementById('cgst');
  var divobj1 = document.getElementById('sgst');
  divobj.value = tot_price;
  divobj1.value = tot_price;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control price qty2" id="client_type" required name="price[]">
<input type="text" class="form-control price qty2" id="client_type" required name="price[]">
<input type="text" class="form-control price qty2" id="client_type" required name="price[]">
<input type="text" class="form-control qty1" id="subtotal" required name="subtotal" readonly>
<input type="text" class="form-control qty1" id="cgst" required name="cgst" readonly>
<input type="text" class="form-control qty1" id="sgst" required name="sgst" readonly>