如何使用JQuery通过索引修改数组式输入框的值

方法1：直接定位当前点击元素内的输入框（最简洁） #

不用计算索引，直接通过点击的.changetext容器找到内部的输入框，避免索引计算可能出现的错误：

$(document).on('click', '.changetext', function(event) {
  event.preventDefault();
  // 找到当前点击容器内的目标输入框并修改值
  $(this).find('input[name="text[]"]').val('ok changed');
});

方法2：利用索引结合jQuery的.eq()方法 #

如果需要保留索引逻辑，可以用.eq()方法选中对应位置的输入框：

$(document).on('click', '.changetext', function(event) {
  event.preventDefault();
  var index = $('.changetext').index(this);
  // 通过.eq(index)选中对应索引的输入框
  $('input[name="text[]"]').eq(index).val('ok changed');
});

方法3：操作DOM元素修改值 #

你之前已经能通过field[index].value获取值，同样可以直接修改这个DOM元素的value属性，或者把它转为jQuery对象使用.val()方法：

$(document).on('click', '.changetext', function(event) {
  event.preventDefault();
  var index = $('.changetext').index(this);
  var field = $('input[name="text[]"]');
  
  // 方式A：直接修改DOM元素的value属性
  field[index].value = 'ok changed';
  
  // 方式B：转为jQuery对象后使用.val()方法
  // $(field[index]).val('ok changed');
});

为什么你之前的修改代码无效？ #

你之前用$('input[name="text[' + index + ']"]')作为选择器，但实际页面中输入框的name属性是text[]，而非text[0]、text[1]这类带索引的格式，所以这个选择器无法匹配到任何元素，自然无法修改值。

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