JSF實現Checkbox狀態持久化：頁面刷新後保持選中狀態的最佳實踐

問題背景：傳統Web開發中Checkbox狀態丟失的痛點

在傳統Servlet/JSP開發中，表單提交後頁面重新渲染，Checkbox的選中狀態需手動讀取請求參數並在JSP中動態輸出checked="checked"，代碼繁瑣且易出錯。JSF（JavaServer Faces）作為組件化Web框架，通過組件狀態自動管理與後台Bean雙向綁定，能以極簡代碼實現Checkbox狀態的自動持久化。

核心實現：三步走通配置

1. 頁面綁定：h:selectBooleanCheckbox綁定Bean屬性

<h:form id="form1">
    <h:selectBooleanCheckbox 
        value="#{recuPlanBB.selectAll}" 
        onclick="return displayAll();" 
    />
</h:form>

• value屬性採用EL表達式綁定後台Bean的boolean屬性selectAll。
• onclick觸發JS提交表單，實現即時交互（也可用<f:ajax>實現無刷新提交）。

2. 後台Bean：標準JavaBean屬性封裝

@ManagedBean(name = "recuPlanBB")
@ViewScoped // 或 @SessionScoped 視業務而定
public class RecuPlanBackingBean implements Serializable {
    private boolean selectAll = false; // 默認未選中

    public boolean isSelectAll() { return selectAll; }
    public void setSelectAll(boolean selectAll) { this.selectAll = selectAll; }
    
    // 其他業務邏輯...
}

• 屬性類型為boolean（基本類型），JSF自動處理「未提交值視為false」的語義。
• 作用域建議@ViewScoped：頁面跳轉前狀態保持，跳轉後自動銷毀，避免Session污染。

3. JS提交輔助（可選，JSF 2.0+建議改用f:ajax）

function displayAll() {
    document.forms['form1'].action = '/recruit/planAudit.jsf';
    document.forms['form1'].submit();
    return true; // 允許默認行為
}

現代寫法：直接在<h:selectBooleanCheckbox>內嵌<f:ajax execute="@this" render="@form" />，無需JS，體驗更佳。

原理解析：為何JSF能自動維持狀態

1. 組件樹狀態保存：JSF在渲染響應階段將組件樹（含selectBooleanCheckbox的submittedValue與value）序列化保存至ViewState（隱藏字段或Session）。
2. 請求處理生命週期：
   • Apply Request Values：解析請求參數，設置組件submittedValue。
   • Process Validations：類型轉換（String→Boolean），驗證通過後設置組件value並推送至Bean（setSelectAll(true)）。
   • Render Response：重新渲染時，組件讀取綁定的Bean屬性（isSelectAll()返回true）輸出checked="checked"。

進階場景與避坑指南

場景一：數據表格中每行Checkbox綁定不同對象屬性

<h:dataTable value="#{bean.items}" var="item">
    <h:column>
        <h:selectBooleanCheckbox value="#{item.selected}" />
    </h:column>
</h:dataTable>

確保item對象正確實現selected屬性的getter/setter，且列表對象在ViewScope內保持同一實例引用。

場景二：全選/反選聯動

// Bean中
public void toggleAll() {
    for (Item item : items) {
        item.setSelected(selectAll);
    }
}
// 頁面：全選Checkbox添加 <f:ajax listener="#{bean.toggleAll}" render="@form" />

常見錯誤與修正

總結

JSF通過組件綁定+生命週期管理+狀態保存三位一體機制，將Checkbox狀態持久化從「手工拼裝HTML屬性」提升為「聲明式綁定業務屬性」。掌握@ViewScoped與基本類型boolean的配合使用，配合<f:ajax>替代手工JS提交，即可構建健壯、可維護的表單交互體驗。