javascript - $.change() 不会检测所有具有相同名称的输入更改

Question

有一个 id='from_name' 的表单，输入重复相同的名称:

<input type="text" name="name[]" class="form-control my-3" value="Name">

这个名字 name="name[] 重复了不止一次。

<input type="text" name="name[]" class="form-control my-3" value="Name">
.
.
.
<input type="text" name="name[]" class="form-control my-3" value="Name">

$('#from_name').change 将仅检测具有相同名称的第一个输入的更改，我如何检测对具有相同名称的任何输入所做的所有更改 name="name[]

name = []:
name = $('[name="device_id[]"]').map(function () {
    return $(this).val();
}).get();

name 数组将仅返回第一个输入值，而不是所有具有相同名称的更改输入。当我仅更改具有相同名称的第二个输入时 name 不会返回任何内容。我缺少什么？

Answer 1

您可以使用名称为 input[name="name[]"] 的属性选择器:

$('#from_name input[name="name[]"]').on('input', function(){
     //You code here
});

像这样，任何名称为 name[] 的输入发生变化都会触发事件。

注意:我建议使用 input 而不是 change 事件，因为它在跟踪用户输入时效率更高。

$('#from_name input[name="name[]"]').on('input', function() {
  var names = $('[name="name[]"]').map(function() {
    return $(this).val();
  }).get();

  console.log(names);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id='from_name'>
  <input type="text" name="name[]" class="form-control my-3" value="Name">
  <input type="text" name="name[]" class="form-control my-3" value="Name">
  <input type="text" name="name[]" class="form-control my-3" value="Name">
  <input type="text" name="name[]" class="form-control my-3" value="Name">
  <input type="text" name="name[]" class="form-control my-3" value="Name">
</form>