JavaScript实现单输入框值同步至多输入框的问题排查

我写了一段JavaScript脚本，想把一个输入框的值同步到多个输入框里，但遇到了问题——值只能填入第一个目标输入框。

原代码如下：

jQuery(document).ready(function ($) {
  var $apartament = $('#value-apartament'),
      $permetru = $('#put-value');

  $apartament.on('input', function () {
    $permetru.val($apartament.val());
  });
});

源输入框的ID是 #value-apartament，另外三个需要同步的目标输入框，我都设置了相同的ID #put-value，希望实现值的同步复制。

问题根源 #

HTML规范要求ID属性必须是页面唯一的，jQuery的$('#put-value')选择器只会匹配到页面中第一个拥有该ID的元素，所以只有第一个目标输入框能接收到同步的值。

修复方案 #

1. 修改目标输入框的标识：把所有目标输入框的id="put-value"替换为class="put-value"（类名支持重复使用）。
2. 修改jQuery选择器：用类选择器$('.put-value')替代ID选择器，这样就能选中所有目标输入框。

修改后的完整代码：

jQuery(document).ready(function ($) {
  var $apartament = $('#value-apartament'),
      $permetru = $('.put-value');

  $apartament.on('input', function () {
    $permetru.val($apartament.val()); // jQuery会自动遍历所有匹配的元素，为它们设置值
  });
});

对应的目标输入框HTML示例：

<input type="text" class="put-value">
<input type="text" class="put-value">
<input type="text" class="put-value">

内容的提问来源于stack exchange，提问作者IND