JSP 表單單選按鈕分組錯誤：同名屬性導致選項互斥的解決方法

問題現象

在一個包含四道選擇題的 JSP 表單中，第一題選了選項 A，第二題卻無法再選 A。頁面渲染出來的 HTML 顯示，所有題目的「A 選項」共用同一個 name 屬性值，導致瀏覽器將它們視為同一組單選按鈕，造成跨題目互斥。

錯誤代碼示例

<!-- 第 1 題 -->
<input type="radio" name="optionA" value="A" /> A
<input type="radio" name="optionB" value="B" /> B
...

<!-- 第 2 題 -->
<input type="radio" name="optionA" value="A" /> A  <!-- 錯誤：name 重複 -->
<input type="radio" name="optionB" value="B" /> B
...

正確的分組原則

同一題目的所有選項必須共用同一個 name，不同題目之間的 name 必須不同。 瀏覽器依據 name 屬性對單選按鈕進行分組，只有同組內的選項才會互斥。

修正後的代碼結構

<!-- 第 1 題：name="q1" -->
<input type="radio" name="q1" value="A" /> A
<input type="radio" name="q1" value="B" /> B
<input type="radio" name="q1" value="C" /> C
<input type="radio" name="q1" value="D" /> D

<!-- 第 2 題：name="q2" -->
<input type="radio" name="q2" value="A" /> A
<input type="radio" name="q2" value="B" /> B
<input type="radio" name="q2" value="C" /> C
<input type="radio" name="q2" value="D" /> D

<!-- 第 3 題：name="q3" -->
<input type="radio" name="q3" value="A" /> A
...

<!-- 第 4 題：name="q4" -->
<input type="radio" name="q4" value="A" /> A
...

JSP 動態生成最佳實踐

若題目由後端數據動態生成，請在循環中為每題生成唯一的 name：

<c:forEach items="${questions}" var="q" varStatus="status">
    <c:forEach items="${q.options}" var="opt">
        <input type="radio" name="q${status.index}" value="${opt.value}" /> ${opt.label}
    </c:forEach>
</c:forEach>

這裡利用 varStatus.index 確保每題的 name 唯一（如 q0, q1, q2...），同時同一題內的所有選項共享該 name。

後端接收參數

提交表單後，Servlet/Controller 可通過 request.getParameter("q0")、request.getParameter("q1") 等分別獲取每題的答案。

常見誤區提醒

• 不要以選項內容（A/B/C/D）作為 name，否則會導致跨題互斥。
• id 屬性可用於關聯 <label>，但不影響分組邏輯；每個 id 仍需唯一。
• 若使用前端框架，確保雙向綁定的模型屬性與 name 分組邏輯一致。

總結

單選按鈕的分組完全由 name 屬性決定。正確做法是：每題一組唯一 name，該題所有選項共用此 name。修正 JSP 生成邏輯後，即可實現多題獨立單選，互不干擾。