JavaScript 多選框值獲取失敗：重複 id 屬性導致 getElementsByName 異常的根因與修復

頁面 5 個同名 `name="carrier"` 的 Checkbox，**全部設置了相同的 `id="carrier"`**，導致 `document.getElementsByName("carrier")` 雖能獲取集合，但瀏覽器內部 ID 映射表衝突，造成首個元素值讀取異常 (顯示空值)，其餘正常。

根因分析

• HTML 標準規定 **`id` 必須全局唯一**。重複 `id` 導致瀏覽器行為未定義：`document.getElementById("carrier")` 僅返回首個，`getElementsByName` 遍歷時可能受 ID 映射表污染影響首項訪問。
• 代碼中 `obj[i].value` 讀取首項 (索引 0) 異常，實為 ID 衝突副作用。

修復方案：移除所有重複 id

<!-- 修復前 -->
<input type="checkbox" name="carrier" id="carrier" value="HU" />
<input type="checkbox" name="carrier" id="carrier" value="JD" /> ...

<!-- 修復後：僅保留 name，移除 id -->
<input type="checkbox" name="carrier" value="HU" />
<input type="checkbox" name="carrier" value="JD" />
<input type="checkbox" name="carrier" value="GS" />
<input type="checkbox" name="carrier" value="GN" />
<input type="checkbox" name="carrier" value="8L" />

最佳實踐：Checkbox 組規範寫法

<fieldset>
  <legend>承運人</legend>
  <label><input type="checkbox" name="carrier" value="HU"> HU</label>
  <label><input type="checkbox" name="carrier" value="JD"> JD</label> ...
</fieldset>

// JS 獲取選中值 (現代寫法)
const selected = [...document.querySelectorAll('input[name="carrier"]:checked')].map(el => el.value);
// 回填選中狀態
const values = new Set("HU/GS/8L".split("/"));
document.querySelectorAll('input[name="carrier"]').forEach(el => el.checked = values.has(el.value));

核心原則

1. `id` 全局唯一，`name` 表單分組可重複 — 此為 HTML 基石規則。
2. Checkbox/Radio 組**只需 `name` 分組**，無需 `id`，除非需關聯 `` 提升點擊區域 (此時每個 `id` 必須唯一)。
3. 使用 `querySelectorAll` + `:checked` 偽類替代老式 `getElementsByName`，語義更清晰、鏈式調用更流暢。