如何检测循环生成的动态数量输入框是否存在相同值？

看起来你遇到的核心问题是：动态生成的输入框数量不固定，但之前的代码只硬编码检测了两个固定ID的输入框（#s1和#s2），这显然无法覆盖所有情况。下面给你一套适配动态场景的解决方案：

第一步：优化服务器端生成的输入框代码 #

先给所有动态生成的输入框添加一个统一的类名（比如serial-number-input），这样我们能精准选中目标输入框，避免和页面其他输入框冲突：

for(int i = 0; i< add; i++) {%> 
  <input name="<%= i%>" id="<%= i%>" class="form-control serial-number-input" placeholder="S/Num"/> 
<%} %>

注：把原来的holder改成标准的placeholder属性，这样占位符显示更符合HTML规范。

第二步：编写通用的重复值检测JS代码 #

我们需要在输入框失去焦点（或实时输入时），检查当前值是否在其他输入框中存在：

$('.serial-number-input').blur(function() {
  // 获取当前输入框的值，去除前后空格避免误判
  const currentValue = $(this).val().trim();
  
  // 如果当前值为空，无需执行检测逻辑
  if (!currentValue) return;

  // 筛选出除当前输入框外，值与当前值完全相同的输入框
  const duplicateInputs = $('.serial-number-input').not(this).filter(function() {
    return $(this).val().trim() === currentValue;
  });

  if (duplicateInputs.length > 0) {
    alert('Same Value detected!');
    // 可选优化：聚焦回当前输入框，方便用户修改
    $(this).focus();
    // 也可以选择直接清空重复值：$(this).val('');
  }
});

代码逻辑说明： #

1. 统一类选择器：通过serial-number-input类精准定位所有动态生成的输入框，避免干扰页面其他输入元素。
2. 去空格处理：用trim()去除值前后的空格，防止" 123"和"123"被误判为不同值。
3. 排除当前输入框：用.not(this)确保不会把当前输入框本身算成重复项。
4. 重复判断：如果筛选出的重复输入框数量大于0，说明存在重复值，触发提示并提供优化交互。

进阶优化：实时检测 #

如果你想在用户输入过程中就实时检测重复（而不仅仅是失去焦点时），可以把事件绑定改成input blur：

$('.serial-number-input').on('input blur', function() {
  // 沿用上面的检测逻辑即可
});

为什么你原来的代码不生效？ #

你之前的代码硬编码了#s1和#s2，但服务器端生成的输入框ID是0、1、2...，而且数量不固定，所以原来的代码只能检测两个固定ID的输入框，完全适配不了动态生成的场景。

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