JSP Radio 單選按鈕跨頁面保持選中狀態：請求參數回顯實現

場景

頁面 A：Radio 默認選中「男」
表單提交到頁面 B：同樣有 Radio 組，需根據提交值默認選中對應項

核心思路：請求參數 → EL 表達式回顯

頁面 A (form 提交)

<form action="pageB.jsp" method="post">
  <input type="radio" name="sex" value="man" checked/> 男
  <input type="radio" name="sex" value="woman"/> 女
  <input type="submit" value="提交"/>
</form>

頁面 B (接收參數並回顯)

<%@ page contentType="text/html;charset=UTF-8" %>
<form>
  <input type="radio" name="sex" value="man" 
    ${param.sex == 'man' ? 'checked' : ''} /> 男
  <input type="radio" name="sex" value="woman" 
    ${param.sex == 'woman' ? 'checked' : ''} /> 女
</form>

關鍵點解析

1. ${param.sex}：JSP 內置 param 對象自動綁定請求參數 name="sex" 的值
2. 三元運算符輸出 checked 屬性：HTML5 中 checked 無需值，存在即為真
3. 若使用 GET 提交，URL 為 pageB.jsp?sex=man，邏輯完全相同

進階：封裝為標籤文件 /WEB-INF/tags/radio.tag

<%@ tag body-content="empty" %>
<%@ attribute name="name" required="true" %>
<%@ attribute name="value" required="true" %>
<%@ attribute name="label" required="true" %>
<%@ attribute name="selectedValue" required="false" default="" %>

<input type="radio" name="${name}" value="${value}" 
  ${selectedValue == value ? 'checked' : ''} /> ${label}

調用簡化

<%@ taglib prefix="t" tagdir="/WEB-INF/tags" %>
<t:radio name="sex" value="man" label="男" selectedValue="${param.sex}"/>
<t:radio name="sex" value="woman" label="女" selectedValue="${param.sex}"/>

前端替代方案（無後端模板）

若頁面 B 為純靜態 HTML，可用 JavaScript 解析 URL 參數回顯：

<script>
const params = new URLSearchParams(location.search);
const sex = params.get('sex');
if (sex) document.querySelector(`input[name="sex"][value="${sex}"]`).checked = true;
</script>

避坑提醒

• 確保表單 method 與接收端一致（POST 用 request.getParameter/param，GET 用 param 同樣可用）
• Radio 組 name 必須完全一致，否則瀏覽器視為不同組
• 防 XSS：若回顯用戶輸入文本，務必 fn:escapeXml() 或 JSTL c:out