如何使用jQuery获取input-group内的输入框值

首先先指出你现有代码的一个基础问题：两个.input-group节点重复使用了id="fld1"，HTML规范要求id在页面内全局唯一，否则id选择器会匹配异常，建议将第二组的id修改为fld2再做后续逻辑开发。

推荐方案：按分组上下文批量取值（适配多组重复结构） #

这是扩展性、稳定性最好的写法，不管后续新增多少组相同结构的输入组，代码不需要调整，也不会出现跨组拿错值的问题。核心逻辑是先遍历每一个独立的.input-group节点，在当前节点的上下文范围内查找对应输入框取值：

// 绑定表单提交事件做示例，你可以根据自己的业务场景触发取值逻辑
$('#mgscall').on('submit', function(e) {
  e.preventDefault();
  // 存储所有组的取值结果
  const formData = [];
  // 遍历表单内每一个输入组
  $(this).find('.input-group').each(function(groupIndex) {
    const $currentGroup = $(this);
    // 取当前组内联系人输入框的值（带tvc类的input）
    const contactName = $currentGroup.find('input.form-control.tvc').val().trim();
    // 取当前组内电话号码输入框的值（带phone-number类的input）
    const phoneNumber = $currentGroup.find('input.form-control.phone-number').val().trim();
    // 可选：取同组复选框的选中状态
    const isSelected = $currentGroup.find('input[type="checkbox"]').prop('checked');

    formData.push({
      groupIndex: groupIndex + 1,
      contact: contactName,
      phone: phoneNumber,
      agreed: isSelected
    });
  });

  // 后续可以在这里做校验、提交接口等逻辑
  console.log('所有输入组取值结果：', formData);
});

这个写法的优势：

• 不依赖元素的固定排列顺序，就算后续你调整组内span、input的先后位置，只要类名不变，取值逻辑就不会失效
• 天然隔离不同组的同类型输入框，不会出现选到其他组输入框的问题
• 新增/删除输入组不需要修改JS逻辑，维护成本极低

轻量方案：获取指定单个输入框的值 #

如果你只需要拿某一个固定输入框的值，不需要批量处理，可以直接用精准选择器获取：

// 获取第一组联系人输入框值（有独立id，直接选）
const contact1 = $('#phonecall1').val().trim();
// 获取第一组电话号码输入框值（无独立id，从父组上下文找，避免选到其他组的同类型输入框）
const phone1 = $('#fld1').find('input.phone-number').val().trim();
// 获取第二组联系人输入框值
const contact2 = $('#phonecall2').val().trim();
// 获取第二组电话号码输入框值（需要先把第二组的id从重复的fld1改成fld2才能正常选中）
const phone2 = $('#fld2').find('input.phone-number').val().trim();

避坑提示 #

• 不要直接用全局选择器比如$('input.phone-number').val()取值，当页面存在多个同class输入框时，这个写法只会返回第一个匹配元素的值，非常容易出bug
• 取值时建议统一加.trim()清除首尾无意义的空白字符，减少后续校验、提交的异常情况
• 复选框的选中状态不要用.val()获取，要用.prop('checked')返回布尔值的选中状态

内容的提问来源于stack exchange，提问作者Lot Dev Suite