如何在jQuery中获取带索引ID的文本框数组并批量转换文本大小写？

嘿，别担心！刚接触jQuery和StackOverflow都很正常，咱们一步步搞定这个问题～

核心思路：选中所有目标文本框 #

你的文本框ID都是txt[i]格式，不管i是多少，咱们可以用jQuery属性前缀选择器来一次性选中所有这类文本框：

$('input[id^="txt["]')

这个选择器的意思是：选中所有id属性以txt[开头的<input>元素，不管后面的索引是多少，动态添加的也能被选中。

场景1：页面加载时批量转换现有文本框内容 #

如果需要在页面刚加载时，就把所有已存在的文本框内容转成大写，可以用each()方法遍历每个元素处理：

$(document).ready(function() {
  // 遍历所有目标文本框
  $('input[id^="txt["]').each(function() {
    // 把当前输入框的值转大写后重新赋值
    $(this).val($(this).val().toUpperCase());
  });
});

场景2：实时输入时自动转大写（含动态添加的文本框） #

如果要让用户输入时实时转大写，还要覆盖后续动态添加的文本框，事件委托是最佳方案（因为动态生成的元素没法直接绑定事件）：

$(document).ready(function() {
  // 事件委托：绑定到父容器（比如你的表单），监听所有当前/未来的目标文本框输入事件
  $('#yourFormContainer').on('input', 'input[id^="txt["]', function() {
    $(this).val($(this).val().toUpperCase());
  });

  // 页面加载时先处理已有内容
  $('input[id^="txt["]').each(function() {
    $(this).val($(this).val().toUpperCase());
  });
});

👉 注意：把#yourFormContainer换成你实际的表单ID，或者所有文本框所在的父容器ID（比如一个<div>的ID）。

补充：动态添加文本框的小提示 #

假设你的添加按钮逻辑是这样的，生成新文本框后，因为用了事件委托，新框会自动继承转大写的功能，不用额外绑定：

$('#addButton').click(function() {
  // 获取当前已有的文本框数量作为新索引
  var newIndex = $('input[id^="txt["]').length;
  // 创建新的文本框元素
  var newInput = $('<input type="text" id="txt[' + newIndex + ']" value="box[' + newIndex + ']">');
  // 添加到容器里
  $('#yourFormContainer').append(newInput);
});

额外建议 #

其实如果给所有这类文本框加一个共同的类名（比如class="uppercase-input"），后续操作会更简洁，比如用$('.uppercase-input')就能选中所有目标框，比ID前缀选择器更直观，你以后可以试试这种方式～

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