如何正确读取循环生成的同ID HTML隐藏元素的值

首先要明确：HTML中ID必须唯一，重复ID不符合规范，这是导致你只能读取第一个元素值的核心原因。以下是几种可行的解决方法：

方法一：给元素设置唯一ID，通过ID传参读取 #

循环生成元素时，给每个隐藏输入框分配唯一ID（比如拼接循环索引），然后将该ID作为参数传给transfer函数，在函数中通过ID获取对应值。

示例代码：

<!-- 循环生成示例（以JS循环为例） -->
<div class="list-item">
  <input type="hidden" id="network-id-0" name="network_id[]" value="1">
  <button type="button" onclick="transfer('network-id-0');">转移</button>
</div>
<div class="list-item">
  <input type="hidden" id="network-id-1" name="network_id[]" value="2">
  <button type="button" onclick="transfer('network-id-1');">转移</button>
</div>

对应的JS函数：

function transfer(hiddenId) {
  // 原生JS
  const networkId = document.getElementById(hiddenId).value;
  // 或jQuery写法
  // const networkId = $(`#${hiddenId}`).val();
  console.log(networkId);
}

方法二：利用DOM关系查找关联元素 #

不需要设置唯一ID，通过按钮与隐藏框的DOM层级关系（比如兄弟元素、父容器下的子元素）来定位目标隐藏框。只需将按钮自身（this）作为参数传入函数即可。

示例代码：

<!-- 循环生成示例 -->
<div class="list-item">
  <input type="hidden" class="network-id" name="network_id[]" value="1">
  <button type="button" onclick="transfer(this);">转移</button>
</div>
<div class="list-item">
  <input type="hidden" class="network-id" name="network_id[]" value="2">
  <button type="button" onclick="transfer(this);">转移</button>
</div>

对应的JS函数：

function transfer(btn) {
  // 原生JS：获取按钮的前一个兄弟元素（隐藏框）
  const networkId = btn.previousElementSibling.value;
  // 或通过父容器查找，更鲁棒（避免DOM顺序变化）
  // const networkId = btn.closest('.list-item').querySelector('.network-id').value;

  // jQuery写法
  // const networkId = $(btn).siblings('.network-id').val();
  // 或 $(btn).closest('.list-item').find('.network-id').val();
  console.log(networkId);
}

方法三：直接将值作为参数传入函数 #

最简洁的方式：循环生成时，直接把隐藏框的value值作为参数传给transfer函数，无需再操作DOM读取。

示例代码：

<!-- 循环生成示例 -->
<div class="list-item">
  <input type="hidden" name="network_id[]" value="1">
  <button type="button" onclick="transfer(1);">转移</button>
</div>
<div class="list-item">
  <input type="hidden" name="network_id[]" value="2">
  <button type="button" onclick="transfer(2);">转移</button>
</div>

对应的JS函数：

function transfer(networkId) {
  // 直接使用传入的值
  console.log(networkId);
}

方案选择建议 #

• 若需要保留DOM元素的关联操作，优先选方法一或方法二；
• 若仅需使用隐藏框的值，方法三最直接，减少DOM查询开销。

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