如何使用jQuery循环获取多个input值并展示到另一指定input中

你现有代码重复度高、拼接逻辑适配性差，无需给每个输入框单独绑定事件，用批量选择器即可快速实现需求，以下是符合你要求的实现代码：

1. 点击按钮触发汇总版本（匹配你的核心需求） #

首先补充触发用的按钮HTML：

<button id="mergeBtn">合并输入值</button>
<input type="text" id="blank1">
<input type="text" id="blank2">
<!-- 剩下blank3到blank8的输入框结构同上 -->
<input type="text" id="fillall">

对应的JS逻辑：

$('#mergeBtn').click(function() {
  const result = []
  // 批量匹配所有id以blank开头的输入框
  $('[id^="blank"]').each(function() {
    const curVal = $(this).val().trim()
    // 不需要过滤空值可以删掉if判断
    if (curVal) {
      result.push(curVal)
    }
  })
  // 可自定义拼接格式，这里示例用空格分隔，要你原来的{=xxx}格式可以改成 `{=${result.join(' ')}}`
  $('#fillall').val(result.join(' '))
})

如果页面存在其他id以blank开头的元素不想被匹配，把选择器[id^="blank"]替换为#blank1,#blank2,#blank3,#blank4,#blank5,#blank6,#blank7,#blank8即可。

2. 实时自动汇总版本（输入值变化就同步更新，无需点击按钮） #

// 批量绑定事件
$('[id^="blank"]').on('change', function() {
  const result = []
  $('[id^="blank"]').each(function() {
    const curVal = $(this).val().trim()
    if (curVal) result.push(curVal)
  })
  $('#fillall').val(`{=${result.join(' ')}}`)
})

内容的提问来源于stack exchange，提问作者رياضية ماكس