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不会返回任何内容。我错过了什么？

标签： javascriptjqueryhtml

Answer 1

您可以使用名称如下的属性选择器input[name="name[]"]：

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

像这样，任何name[]更改名称的输入都会触发事件。

注意： 我建议使用 ofinput而不是changeevent，因为当您跟踪用户输入时它会更有效。

$('#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>